import {
  Button,
  Card,
  Divider,
  Skeleton,
  Stack,
  Typography,
} from '@mui/material';
import { IconMailUp } from '@tabler/icons-react';

import { type SurveyParticipationHeaderProps } from './types';

const SurveyParticipationHeader = ({
  participationRate,
  completedCount,
  isLoading = false,
  showReminderButton = false,
  onSendReminder,
  labels,
}: SurveyParticipationHeaderProps) => {
  return (
    <Stack sx={{ flexDirection: 'row', gap: 2 }}>
      <Card
        sx={theme => ({
          maxWidth: 320,
          width: '100%',
          borderRadius: 2,
          border: `1px solid ${theme.palette.new.border.neutral.default}`,
        })}
      >
        <Stack sx={{ p: 2 }}>
          <Typography
            variant="globalS"
            color={theme => theme.palette.new.text.neutral.lighter}
          >
            {labels.participation}
          </Typography>
          {isLoading && (
            <Skeleton
              variant="text"
              width="4rem"
              height="2.5rem"
            />
          )}
          {!isLoading && (
            <Typography
              variant="globalXL"
              color={theme => theme.palette.new.text.neutral.default}
              fontWeight="fontWeightSemiBold"
            >
              {`${participationRate}%`}
            </Typography>
          )}
        </Stack>
        {showReminderButton && (
          <>
            <Divider sx={{ mx: 2 }} />
            <Stack sx={{ p: 2, width: 'fit-content' }}>
              <Button
                variant="contained"
                onClick={onSendReminder}
                disabled={!onSendReminder}
                endIcon={<IconMailUp />}
              >
                {labels.sendReminder}
              </Button>
            </Stack>
          </>
        )}
      </Card>

      <Card
        sx={theme => ({
          maxWidth: 320,
          width: '100%',
          borderRadius: 2,
          border: `1px solid ${theme.palette.new.border.neutral.default}`,
        })}
      >
        <Stack sx={{ p: 2 }}>
          <Typography
            variant="globalS"
            color={theme => theme.palette.new.text.neutral.lighter}
          >
            {labels.answers}
          </Typography>
          {isLoading && (
            <Skeleton
              variant="text"
              width="4rem"
              height="2.5rem"
            />
          )}
          {!isLoading && (
            <Typography
              variant="globalXL"
              color={theme => theme.palette.new.text.neutral.default}
              fontWeight="fontWeightSemiBold"
            >
              {completedCount}
            </Typography>
          )}
        </Stack>
        <Divider sx={{ mx: 2 }} />
        <Stack sx={{ p: 2, justifyContent: 'flex-end' }}>
          <Stack sx={{ height: 40, justifyContent: 'center' }}>
            <Typography
              variant="globalXXS"
              color={theme => theme.palette.new.text.neutral.default}
            >
              {labels.total}
            </Typography>
          </Stack>
        </Stack>
      </Card>
    </Stack>
  );
};

export default SurveyParticipationHeader;
