import Typography from '@material-hu/mui/Typography';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

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

import { MAX_HOME_DESCRIPTION_LENGTH } from '../../constants';

type HomeDescriptionProps = {
  disabled?: boolean;
};

export const HomeDescription = ({ disabled = false }: HomeDescriptionProps) => {
  const { t } = useLokaliseTranslation();

  return (
    <CardContainer
      fullWidth
      color="grey"
    >
      <Typography sx={{ mb: 1, fontWeight: 'fontWeightSemiBold' }}>
        {t('general:description')}
      </Typography>
      <FormInputClassic
        name="description"
        inputProps={{
          disabled,
          fullWidth: true,
          maxLength: MAX_HOME_DESCRIPTION_LENGTH,
          minRows: 4,
          multiline: true,
        }}
      />
    </CardContainer>
  );
};