'use client';

import Link from 'next/link';

import { cn } from '@/lib/utils';
import { pathsConfig } from '@/packages/shared/src/config';
import { ComponentInstanceIcon } from '@radix-ui/react-icons';
import { ChevronRight, HeartPulse } from 'lucide-react';

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

import { ServiceCategory } from './service-categories';

export default function OrderCards({
  heroCategories,
}: {
  heroCategories: ServiceCategory[];
}) {
  return (
    <div className="xs:grid-cols-3 mt-4 grid grid-cols-1 gap-2">
      {heroCategories.map(({ name, description, color, handle }) => (
        <Card
          key={name}
          variant={`gradient-${color}` as CardProps['variant']}
          className="flex flex-col justify-between"
        >
          <CardHeader className="relative flex flex-row justify-between">
            <div
              className={cn(
                'flex size-8 items-center-safe justify-center-safe rounded-full',
                `text-${color}`,
                `bg-${color}/10`,
                {
                  'bg-primary/10': color === 'success',
                },
              )}
            >
              <ComponentInstanceIcon
                className={cn('size-4', `fill-${color}`)}
              />
            </div>
            <div className="absolute top-2 right-2 flex size-8 items-center-safe justify-center-safe rounded-xl text-white">
              <Link
                href={pathsConfig.app.bookingHandle.replace('[handle]', handle)}
              >
                <Button
                  size="icon"
                  variant="outline"
                  className="px-2 text-black"
                >
                  <ChevronRight className="size-4 stroke-2" />
                </Button>
              </Link>
            </div>
          </CardHeader>
          <CardFooter className="mt-5 flex flex-col items-start gap-2">
            <h5>{name}</h5>
            <CardDescription>{description}</CardDescription>
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}