"use client";

import { appConfig } from "@/shared/config/app-config";
import { TrendingUp, Download } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

type Props = {
  url: string;
  icon: string;
  title: string;
  value: number | string;
  loading?: boolean;
};

export function StatisticCardItem({ url, icon, title, value, loading }: Props) {
  const isDisabled = title === "Total Pengunjung";
  if (loading) {
    return (
      <div className="bg-biru-300/50 h-[150px] animate-pulse rounded-3xl px-7 py-4">
        <div className="mb-2 flex items-center justify-between">
          <div className="h-8 w-24 rounded bg-white/40" />
          <div className="h-8 w-8 rounded bg-white/40" />
        </div>
        <div className="mt-3 h-4 w-32 rounded bg-white/40" />
        <div className="mt-8 h-4 w-24 rounded bg-white/40" />
      </div>
    );
  }

  return (
    <Link
      href={url}
      onClick={isDisabled ? (e) => e.preventDefault() : undefined}
      aria-disabled={isDisabled}
      className={`group border-primary bg-biru-300 font-onest relative h-[150px] h-full overflow-hidden rounded-3xl border border-3 px-7 py-5 transition-all duration-300 ease-in-out ${isDisabled ? "hover:cursor-default" : "hover:cursor-pointer"}`}
    >
      <div className="mb-2 flex items-center justify-between">
        <h5 className="text-[32px] font-bold text-white">{value}</h5>
        <Image
          src={icon}
          alt="icon"
          width={32}
          height={32}
          className="transition-transform duration-300 ease-in-out group-hover:top-0 group-hover:right-0"
        />
      </div>

      <div className="flex flex-col text-white">
        <p className="text-sm font-normal">{title}</p>
        <div className="mt-2 flex items-center gap-2 text-sm">
          {title === "Total Pengunjung" ? (
            <>
              <TrendingUp /> Pengunjung dalam 1 Tahun
            </>
          ) : title === "Total Unduhan" ? (
            <>
              <Download /> Unduhan dalam 1 Tahun
            </>
          ) : (
            <p className="underline">Lihat Semua</p>
          )}
        </div>
      </div>

      <Image
        src={appConfig.heroCardOrnament}
        width={120}
        height={120}
        alt="ornament"
        className="absolute top-0 right-0 mix-blend-overlay transition-transform duration-500 ease-out group-hover:scale-125"
      />
    </Link>
  );
}