---
import getDateFormatter from '@/utils/date-formatter';
import Typography from './typography.astro';

export interface Props {
  startDate: Date;
  endDate: Date | null;
  locale: string;
  translationForNow: string;
}
const { startDate, endDate, locale, translationForNow } = Astro.props;
const getFormattedDate = getDateFormatter(locale);
---

<Typography variant="item-subtitle">
  {getFormattedDate(startDate).concat(' - ', endDate ? getFormattedDate(endDate) : translationForNow)}
</Typography>
