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 = ({ amount = 2 }: { amount?: number }) => {
  const emptyData = [
    {
      title: '1',
      description: '',
      subtitle: '',
      variant: { id: '' },
      price: 1,
    },
  ];
  return Array.from({ length: amount }, (_, index) => {
    const { title, description, subtitle } = emptyData[0]!;

    return (
      <Skeleton key={title + index}>
        <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>
    );
  });
};

export default RecommendationsSkeleton;