'use client'

import type { ReactNode } from 'react'
import { toast } from 'sonner'
import { PlatformAdClose } from './PlatformAdClose'
import { PlatformAdDescription } from './PlatformAdDescription'
import { PlatformAdIcon } from './PlatformAdIcon'
import { PlatformAdLink } from './PlatformAdLink'
import { PlatformAdRoot } from './PlatformAdRoot'

export type PlatformAdProps = {
  description: ReactNode
  icon?: PlatformAdIcon | undefined
  link: {
    href: string
    text: string
  }
  toastId?: string | number
}

const PlatformAd = ({
  description,
  icon = 'product',
  link,
  toastId,
}: PlatformAdProps & { toastId: string | number }) => (
  <PlatformAdRoot>
    <div className="mt-1 h-8 w-8">
      <PlatformAdIcon icon={icon} />
    </div>
    <div className="flex grow flex-col gap-2">
      <PlatformAdDescription>{description}</PlatformAdDescription>
      <PlatformAdLink link={link} toastId={toastId} />
    </div>
    <PlatformAdClose toastId={toastId} />
  </PlatformAdRoot>
)

export function platformAd(props: PlatformAdProps) {
  toast.custom((toastId) => <PlatformAd {...props} toastId={toastId} />, {
    position: 'bottom-left',
    duration: Infinity,
  })
}