import { Icon } from "@iconify/react";

export default function DashboardStats() {
  const statsData = [
    {
      type: "profile",
      name: "test akun",
      role: "admin-mabes",
      todayPosts: 0,
      weekPosts: 0,
      icon: "mdi:account-tie",
    },
    {
      label: "Total post",
      value: 2363,
      icon: "mdi:post-outline",
    },
    {
      label: "Total views",
      value: 80,
      icon: "ic:baseline-star-rate",
    },
    {
      label: "Total share",
      value: 1,
      icon: "mdi:share",
    },
    {
      label: "Total comment",
      value: 1,
      icon: "mdi:comment-outline",
    },
  ];

  return (
    <div className="p-4 flex flex-col lg:flex-row justify-between gap-4">
      {statsData.map((item, index) => {
        if (item.type === "profile") {
          return (
            <div key={index} className="bg-white w-full lg:w-[25%] shadow-md rounded-lg p-4 flex flex-col justify-between col-span-1 sm:col-span-2">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-semibold">{item.name}</p>
                  <p className="text-sm text-gray-500">{item.role}</p>
                </div>
                <Icon icon={item.icon} className="text-[60px] text-black" />
              </div>
              <div className="mt-4 text-sm text-black space-y-1 flex flex-row gap-2">
                <p>
                  <span className="text-black font-bold text-[18px]">{item.todayPosts} Post</span> Hari ini
                </p>
                <p>
                  <span className="text-black font-bold text-[18px]">{item.weekPosts} Post</span> Minggu ini
                </p>
              </div>
            </div>
          );
        }

        return (
          <div key={index} className="bg-white shadow-md rounded-lg p-4 flex flex-col w-full lg:w-[18%] items-center justify-center">
            <Icon icon={item.icon} className="text-[45px] text-black mb-2" />
            <p className="text-sm text-gray-500">{item.label}</p>
            <p className="text-xl font-bold">{item.value}</p>
          </div>
        );
      })}
    </div>
  );
}