import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import { alpha } from '@material-hu/mui/styles';

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

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

type Props = {
  onRemove: () => void;
};

const DefaultCoverPicture: FC<Props> = ({ onRemove }) => {
  const { t } = useLokaliseTranslation('service_management');
  return (
    <Stack
      sx={{
        width: 1,
        position: 'relative',
        borderRadius: 1.5,
        aspectRatio: 101 / 25,
        backgroundImage: theme =>
          `linear-gradient(to right, ${alpha(theme.palette.primary.main, 0.5)}, ${alpha(theme.palette.primary.main, 1)})`,
      }}
    >
      <Button
        onClick={onRemove}
        variant="secondary"
        sx={{
          position: 'absolute',
          right: '18px',
          top: '14px',
        }}
      >
        {t('change_image')}
      </Button>
    </Stack>
  );
};

export default DefaultCoverPicture;