import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import CertificateColorSelect from './CertificateColorSelect';

const CertificateStylesSection = () => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();

  return (
    <CardContainer
      fullWidth
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
          width: '100%',
        },
      }}
    >
      <Typography
        variant="globalS"
        sx={{
          fontWeight: 'fontWeightSemiBold',
          color: palette.new.text.neutral.lighter,
        }}
      >
        {t('settings.certificates.create_flow.style')}
      </Typography>
      <CertificateColorSelect />
    </CardContainer>
  );
};

export default CertificateStylesSection;
