"use client";

import { ChevronRight, HeartPulse } from 'lucide-react';
import Link from 'next/link';

import { Button } from '@kit/ui/button';
import {
  Card,
  CardHeader,
  CardDescription,
  CardProps,
  CardFooter,
} from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import { cn } from '@/lib/utils';

const dummyCards = [
  {
    title: 'booking:analysisPackages.title',
    description: 'booking:analysisPackages.description',
    descriptionColor: 'text-primary',
    icon: (
      <Link href={'/home/order-analysis-package'}>
        <Button size="icon" variant="outline" className="px-2 text-black">
          <ChevronRight className="size-4 stroke-2" />
        </Button>
      </Link>
    ),
    cardVariant: 'gradient-success' as CardProps['variant'],
    iconBg: 'bg-warning',
  },
];

export default function OrderCards() {
  return (
    <div className="grid grid-cols-3 gap-6 mt-4">
      {dummyCards.map(({
        title,
        description,
        icon,
        cardVariant,
        descriptionColor,
        iconBg,
      }) => (
        <Card
          key={title}
          variant={cardVariant}
          className="flex flex-col justify-between"
        >
          <CardHeader className="items-end-safe">
            <div
              className={cn(
                'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
                iconBg,
              )}
            >
              {icon}
            </div>
          </CardHeader>
          <CardFooter className="flex flex-col items-start gap-2">
            <div
              className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
            >
              <HeartPulse className="size-4 fill-green-500" />
            </div>
            <h5>
              <Trans i18nKey={title} />
            </h5>
            <CardDescription className={descriptionColor}>
              <Trans i18nKey={description} />
            </CardDescription>
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}