import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { SparklesIcon } from '@/icons';

// Sparkles icon component for processing toast
export const SparklesImageComponent = () => (
  <div className='mr-3 flex shrink-0 items-center'>
    <SparklesIcon className='h-[30px] w-[30px] animate-pulse2 text-white' />
  </div>
);

// Thumbnail image component for completion toast
export const ThumbnailImageComponent = ({
  thumbnailUrl,
}: {
  thumbnailUrl: string;
}) => (
  <div className='mr-3 flex shrink-0 items-center'>
    <img
      src={thumbnailUrl}
      alt='Generated cover'
      className='h-10 w-10 rounded-lg object-cover'
    />
  </div>
);

// View button component for the completion toast
export const ViewGenerationButton = ({
  clipId,
  onClick,
}: {
  clipId: string;
  onClick: (clipId: string) => void;
}) => (
  <Button
    variant={ButtonVariant.Aura}
    size={ButtonSize.Small}
    shape={ButtonShape.Pill}
    onClick={() => onClick(clipId)}
  >
    View
  </Button>
);

// Dismiss button component for the pending toast
export const DismissPendingButton = ({ onClick }: { onClick: () => void }) => (
  <Button
    variant={ButtonVariant.LightGlass}
    size={ButtonSize.Small}
    shape={ButtonShape.Pill}
    onClick={onClick}
  >
    Dismiss
  </Button>
);