import { getURL } from '@/lib/utils';

import AppLink from '@/components/ui/AppLink';
import { Icon } from '@/components/ui/Icon';

export default function Card({
  isLoading,
  icon,
  title,
  data,
  link
}: {
  isLoading: boolean;
  icon: string;
  title: string;
  data: any;
  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">
        <Icon name="loader-5" className="h-4 w-4" />
        <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 name={icon} className="text-2xl text-muted" />
      <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)}
          >
            <Icon name="arrow-right-line" />
          </AppLink>
        )}
      </div>
    </div>
  );
}