interface FormattedDateProps {
  date: Date
  format?: 'long' | 'short' | 'responsive'
}

export function FormattedDate({ date, format = 'long' }: FormattedDateProps) {
  const long = date.toLocaleDateString('en-us', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
  const short = date.toLocaleDateString('en-us', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  })

  return (
    <time dateTime={date.toISOString()}>
      {format === 'short' && short}
      {format === 'long' && long}
      {format === 'responsive' && (
        <>
          <span className="sm:hidden">{short}</span>
          <span className="hidden sm:inline">{long}</span>
        </>
      )}
    </time>
  )
}