import { type FC, memo } from 'react';

import CardContent from '@material-hu/mui/CardContent';
import CardHeader from '@material-hu/mui/CardHeader';
import { styled } from '@material-hu/mui/styles';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import { UpcomingCelebrationsTabs } from 'src/components/dashboard/upcomingCelebrations';
import useCelebrationTitle from 'src/components/dashboard/upcomingCelebrations/hooks/useCelebrationTitle';

const Card = styled(HuCardContainer)({
  height: '100%',
  width: '400px',
  '& .MuiCardContent-root': {
    padding: 0,
  },
  '& .MuiCardContent-root:last-child': {
    padding: 0,
  },
  '& .MuiBox-root.scrollbar-container': {
    position: 'relative',
    zIndex: 0,
  },
});

const UpcomingCelebrationsCard: FC = () => {
  const { title: celebrationTitle } = useCelebrationTitle();

  return (
    <Card>
      <CardHeader
        titleTypographyProps={{ variant: 'globalM', fontWeight: 'semiBold' }}
        title={celebrationTitle}
      />
      <CardContent>
        <UpcomingCelebrationsTabs />
      </CardContent>
    </Card>
  );
};

export default memo(UpcomingCelebrationsCard);