import { getTimezoneOffset } from '@/utils/timezone'
import { Typography } from '@linagora/twake-mui'
import { CalendarEvent } from '../EventsTypes'
import { formatDate } from './utils/formatDate'
import { formatEnd } from './utils/formatEnd'

export function EventTimeSubtitle({
  event,
  t,
  timezone
}: {
  event: CalendarEvent
  t: (k: string, p?: string | object) => string
  timezone: string
}) {
  const formattedEnd = event.end
    ? formatEnd(event.start, event.end, t, timezone, event.allday)
    : null

  return (
    <Typography color="text.secondaryContainer">
      {formatDate(event.start, t, timezone, event.allday)}
      {formattedEnd &&
        ` – ${formattedEnd} ${!event.allday ? getTimezoneOffset(timezone, new Date(event.start)) : ''}`}
    </Typography>
  )
}
