import { toast } from 'sonner'
import { cn } from '../../utils'
import { typographyVariants } from '../Typography'
import { LinkIcon } from './LinkIcon'
import type { PlatformAdProps } from './PlatformAd'

export const PlatformAdLink = ({
  link,
  toastId,
}: {
  link: NonNullable<PlatformAdProps['link']>
  toastId: NonNullable<PlatformAdProps['toastId']>
}) => (
  <a
    href={link.href}
    target="_blank"
    rel="noreferrer"
    className={cn(
      typographyVariants({ variant: 'body-semi-xs' }),
      'group flex items-center gap-2 text-platform-ad-link outline-none hover:text-platform-ad-link-hover focus:ring-2 focus:ring-ring',
    )}
    onClick={() => toast.dismiss(toastId)}
  >
    {link.text}
    <LinkIcon />
  </a>
)