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

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

export const CalloutIcon: FC<PropsWithChildren<Props>> = ({ icon }) => {
  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}
      />
    ))
  )
}

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

export default Callout