import { type CalloutBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints'
import Image from 'next/image'
import { type PropsWithChildren } from 'react'

export interface Props {
  icon: CalloutBlockObjectResponse['callout']['icon']
}

export function CalloutIcon({ icon }: PropsWithChildren<Props>) {
  return (
    icon &&
    (icon.type === 'emoji' ? (
      <span>{icon.emoji}</span>
    ) : (
      <Image
        alt=""
        className="h-6 w-6"
        src={icon.type === 'file' ? icon.file.url : icon.external.url}
        width={24}
        height={24}
      />
    ))
  )
}

export default function Callout({ children }: PropsWithChildren) {
  return (
    <div className="flex rounded dark:bg-white dark:text-black">{children}</div>
  )
}