import { ChevronRightIcon, Loader2, type LucideIcon } from 'lucide-react';
import { getURL } from '@/lib/utils';

import AppLink from '@/components/ui/AppLink';

export default function Card({
  isLoading,
  Icon,
  title,
  data,
  link
}: {
  isLoading: boolean;
  Icon: LucideIcon;
  title: string;
  data: string | number;
  link?: string;
}) {
  if (isLoading)
    return (
      <div className="flex w-full items-center space-x-4 rounded-lg border-2 border-highlight-primary bg-primary-700 p-4 shadow-md">
        <Loader2 className="animate-spin text-2xl text-muted" size={30} />
        <div className="flex flex-col space-y-4">
          <span className="h-[18px] w-32 animate-pulse rounded bg-highlight-primary" />
          <span className="h-[18px] w-24 animate-pulse rounded bg-highlight-primary" />
        </div>
      </div>
    );

  return (
    <div className="flex w-full items-center space-x-4 rounded-lg border-2 border-highlight-primary bg-primary-700 p-4 shadow-md">
      <Icon className="text-muted" size={30} />
      <div className="flex w-full items-center justify-between">
        <div className="flex-col">
          <h2 className="text-xl font-semibold">{data}</h2>
          <p className="text-muted">{title}</p>
        </div>
        {link && (
          <AppLink
            className="text-highlight-secondary transition-colors duration-150 hover:text-brand"
            href={getURL(link)}
          >
            <ChevronRightIcon className="h-6 w-6" />
          </AppLink>
        )}
      </div>
    </div>
  );
}