'use client';

import React from 'react';

import { redirect } from 'next/navigation';

import { pathsConfig } from '@/packages/shared/src/config';
import { StoreProduct } from '@medusajs/types';
import { ComponentInstanceIcon } from '@radix-ui/react-icons';

import { cn } from '@kit/ui/shadcn';
import { Card, CardDescription } from '@kit/ui/shadcn/card';

export interface ServiceCategory {
  name: string;
  handle: string;
  color: string;
  description: string;
  products: StoreProduct[];
  countryCode: string;
}

const ServiceCategories = ({
  categories,
}: {
  categories: ServiceCategory[];
}) => {
  return (
    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
      {categories.map((category, index) => (
        <Card
          key={index}
          className="flex cursor-pointer gap-2 p-4 shadow hover:shadow-md"
          onClick={() => {
            redirect(
              pathsConfig.app.bookingHandle.replace(
                '[handle]',
                category.handle,
              ),
            );
          }}
        >
          <div
            className={cn(
              'flex size-8 items-center-safe justify-center-safe rounded-full',
              `bg-${category.color}/10`,
              `text-${category.color}`,
            )}
          >
            <ComponentInstanceIcon />
          </div>
          <div>
            <h5 className="mb-2 text-lg font-semibold">{category.name}</h5>
            <CardDescription className="">
              {category.description}
            </CardDescription>
          </div>
        </Card>
      ))}
    </div>
  );
};

export default ServiceCategories;
