import Link from 'next/link';

import { ChevronRight, HeartPulse } from 'lucide-react';

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

export default function DashboardCards() {
  return (
    <div className="flex gap-4 lg:px-4">
      <Card
        variant="gradient-success"
        className="xs:w-1/2 sm:w-auto flex w-full flex-col justify-between"
      >
        <CardHeader className="flex-row">
          <div
            className={
              'bg-primary/10 mb-6 flex size-8 items-center-safe justify-center-safe rounded-full text-white'
            }
          >
            <HeartPulse className="size-4 fill-green-500" />
          </div>
          <div className="bg-warning ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white">
            <Link href="/home/order-analysis">
              <Button size="icon" variant="outline" className="px-2 text-black">
                <ChevronRight className="size-4 stroke-2" />
              </Button>
            </Link>
          </div>
        </CardHeader>
        <CardFooter className="flex flex-col items-start gap-2">
          <h5>
            <Trans i18nKey="dashboard:heroCard.orderAnalysis.title" />
          </h5>
          <CardDescription className="text-primary">
            <Trans i18nKey="dashboard:heroCard.orderAnalysis.description" />
          </CardDescription>
        </CardFooter>
      </Card>
    </div>
  );
}