'use client';

import Link from 'next/link';

import { BlendingModeIcon } from '@radix-ui/react-icons';
import {
  Droplets,
} from 'lucide-react';

import { InfoTooltip } from '@kit/shared/components/ui/info-tooltip';
import { Button } from '@kit/ui/button';
import {
  Card,
  CardContent,
  CardHeader,
} from '@kit/ui/card';
import { Trans } from '@kit/ui/trans';
import { cn } from '@kit/ui/utils';

const dummyRecommendations = [
  {
    icon: <BlendingModeIcon className="size-4" />,
    color: 'bg-cyan/10 text-cyan',
    title: 'Kolesterooli kontroll',
    description: 'HDL-kolestrool',
    tooltipContent: 'Selgitus',
    price: '20,00 €',
    buttonText: 'Telli',
    href: '/home/booking',
  },
  {
    icon: <BlendingModeIcon className="size-4" />,
    color: 'bg-primary/10 text-primary',
    title: 'Kolesterooli kontroll',
    tooltipContent: 'Selgitus',
    description: 'LDL-Kolesterool',
    buttonText: 'Broneeri',
    href: '/home/booking',
  },
  {
    icon: <Droplets />,
    color: 'bg-destructive/10 text-destructive',
    title: 'Vererõhu kontroll',
    tooltipContent: 'Selgitus',
    description: 'Score-Risk 2',
    price: '20,00 €',
    buttonText: 'Telli',
    href: '/home/booking',
  },
];

export default function DashboardRecommendations() {
  return (
    <Card>
      <CardHeader className="items-start">
        <h4>
          <Trans i18nKey="dashboard:recommendedForYou" />
        </h4>
      </CardHeader>
      <CardContent className="space-y-6">
        {dummyRecommendations.map(
          (
            {
              icon,
              color,
              title,
              description,
              tooltipContent,
              price,
              buttonText,
              href,
            },
            index,
          ) => {
            return (
              <div
                className="flex w-full justify-between gap-3 overflow-scroll"
                key={index}
              >
                <div className="mr-4 flex min-w-fit flex-row items-center gap-4">
                  <div
                    className={cn(
                      'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
                      color,
                    )}
                  >
                    {icon}
                  </div>
                  <div className="min-w-fit">
                    <div className="inline-flex items-center gap-1 align-baseline text-sm font-medium">
                      {title}
                      <InfoTooltip content={tooltipContent} />
                    </div>
                    <p className="text-muted-foreground text-sm">
                      {description}
                    </p>
                  </div>
                </div>
                <div className="grid w-36 min-w-fit auto-rows-fr grid-cols-2 items-center gap-4">
                  <p className="text-sm font-medium"> {price}</p>
                  {href ? (
                    <Link href={href}>
                      <Button
                        size="sm"
                        variant="secondary"
                        className="w-full min-w-fit"
                      >
                        {buttonText}
                      </Button>
                    </Link>
                  ) : (
                    <Button
                      size="sm"
                      variant="secondary"
                      className="w-full min-w-fit"
                    >
                      {buttonText}
                    </Button>
                  )}
                </div>
              </div>
            );
          },
        )}
      </CardContent>
    </Card>
  );
}