import React from 'react';

import { InfoTooltip } from '@/packages/shared/src/components/ui/info-tooltip';

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

const RecommendationsSkeleton = () => {
  const emptyData = [
    {
      title: '1',
      description: '',
      subtitle: '',
      variant: { id: '' },
      price: 1,
    },
    {
      title: '2',
      description: '',
      subtitle: '',
      variant: { id: '' },
      price: 1,
    },
  ];
  return (
    <div className="xs:grid-cols-3 mt-4 grid gap-6">
      {emptyData.map(({ title, description, subtitle }) => (
        <Skeleton key={title}>
          <Card>
            <CardHeader className="flex-row">
              <div
                className={
                  'mb-6 flex size-8 items-center-safe justify-center-safe'
                }
              />
              <div className="ml-auto flex size-8 items-center-safe justify-center-safe">
                <Button size="icon" className="px-2" />
              </div>
            </CardHeader>
            <CardFooter className="flex">
              <div className="flex flex-1 flex-col items-start">
                <h5>
                  {title}
                  {description && (
                    <>
                      {'  '}
                      <InfoTooltip
                        content={
                          <div className="flex flex-col gap-2">
                            <span>{description}</span>
                          </div>
                        }
                      />
                    </>
                  )}
                </h5>
                {subtitle && <CardDescription>{subtitle}</CardDescription>}
              </div>
              <div className="flex flex-col items-end gap-2 self-end text-sm"></div>
            </CardFooter>
          </Card>
        </Skeleton>
      ))}
    </div>
  );
};

export default RecommendationsSkeleton;