import { CheckIcon } from '@/icons';
import { Clip } from '@/state/clipStore';

const DeleteClipToast = ({ clips }: { clips: Clip[] }) => {
  const clipString =
    clips.length === 1
      ? clips[0]?.title || clips[0]?.metadata?.tags
      : `${clips.length} clips`;
  return (
    <div className='flex max-w-[475px] items-center justify-between rounded-md bg-accent-red p-4 text-white'>
      <div className='flex flex-1 items-center'>
        <span>
          <b>{clipString}</b> {clips.length === 1 ? 'has' : 'have'} been removed
          from your account.
        </span>
        <CheckIcon className='ml-2' />
      </div>
    </div>
  );
};

export default DeleteClipToast;