import { type FC } from 'react';

import HuTitle from '@material-hu/components/design-system/Title';

import { type Event } from 'src/types/events';

import { formatEventDate, useDescription } from '../utils';

type Props = {
  event: Event;
  hideDescription?: boolean;
};

export const EventHeader: FC<Props> = ({ event, hideDescription }) => {
  const eventLocation = useDescription(event);

  return (
    <HuTitle
      variant="XL"
      description={formatEventDate(event.startDateTime)}
      copetin={eventLocation}
      title={event.name}
      sx={{ overflowWrap: 'anywhere' }}
      slotProps={{
        description: {
          sx: {
            maxHeight: hideDescription ? 0 : '4em',
            opacity: hideDescription ? 0 : 1,
            overflow: 'hidden',
            transition: 'max-height 0.3s ease, opacity 0.3s ease',
          },
        },
      }}
    />
  );
};

export default EventHeader;