import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import { toast } from '@/components/toast/Toast';
import useClip from '@/hooks/useClip';
import { CopyIcon } from '@/icons';

export const ShareLinkMessage = ({
  clipId,
  link,
}: {
  clipId: string;
  link: string;
}) => {
  const clip = useClip(clipId);
  return (
    <div className='flex w-[300px] max-w-full rounded-xl bg-background-fog-thin p-4 text-sm'>
      <div className='relative mr-4 h-12 w-12 flex-shrink-0'>
        <ImageWithFallback
          src={clip?.clip?.image_url}
          alt={`${clip?.clip?.title || 'Clip'} Artwork`}
        />
      </div>
      <div className='flex flex-1 flex-col'>
        <a
          href={`/song/${clip?.clip?.id}`}
          target='_blank'
          rel='noopener noreferrer'
          className='line-clamp-1 font-medium text-foreground-secondary hover:text-foreground-primary'
        >
          {clip?.clip?.title || 'Untitled Clip'}
        </a>
        <span className='text-sm text-foreground-tertiary'>
          {clip?.clip?.display_tags}
        </span>
      </div>
      <div className='ml-4 flex flex-col items-end justify-center'>
        <Button
          size={ButtonSize.Small}
          shape={ButtonShape.Pill}
          variant={ButtonVariant.Secondary}
          icon={<CopyIcon />}
          onClick={() => {
            navigator.clipboard.writeText(link);
            toast({ title: 'Link copied to clipboard', status: 'success' });
          }}
        />
      </div>
    </div>
  );
};