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

import Link from 'next/link';
import { Button } from '@kit/ui/button';
import { ChevronRight, HeartPulse } from 'lucide-react';

export default function DashboardCards() {
  return (
    <div className='flex gap-4 lg:px-4'>
      <Card
        variant="gradient-success"
        className="flex flex-col justify-between"
      >
        <CardHeader className="flex-row">
          <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>
          <div className='ml-auto flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-warning'>
            <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>
  );
}