import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Card, Divider, Skeleton, Stack, Typography, } from '@mui/material';
import { IconMailUp } from '@tabler/icons-react';
const SurveyParticipationHeader = ({ participationRate, completedCount, isLoading = false, showReminderButton = false, onSendReminder, labels, }) => {
    return (_jsxs(Stack, { sx: { flexDirection: 'row', gap: 2 }, children: [_jsxs(Card, { sx: theme => ({
                    maxWidth: 320,
                    width: '100%',
                    borderRadius: 2,
                    border: `1px solid ${theme.palette.new.border.neutral.default}`,
                }), children: [_jsxs(Stack, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "globalS", color: theme => theme.palette.new.text.neutral.lighter, children: labels.participation }), isLoading && (_jsx(Skeleton, { variant: "text", width: "4rem", height: "2.5rem" })), !isLoading && (_jsx(Typography, { variant: "globalXL", color: theme => theme.palette.new.text.neutral.default, fontWeight: "fontWeightSemiBold", children: `${participationRate}%` }))] }), showReminderButton && (_jsxs(_Fragment, { children: [_jsx(Divider, { sx: { mx: 2 } }), _jsx(Stack, { sx: { p: 2, width: 'fit-content' }, children: _jsx(Button, { variant: "contained", onClick: onSendReminder, disabled: !onSendReminder, endIcon: _jsx(IconMailUp, {}), children: labels.sendReminder }) })] }))] }), _jsxs(Card, { sx: theme => ({
                    maxWidth: 320,
                    width: '100%',
                    borderRadius: 2,
                    border: `1px solid ${theme.palette.new.border.neutral.default}`,
                }), children: [_jsxs(Stack, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "globalS", color: theme => theme.palette.new.text.neutral.lighter, children: labels.answers }), isLoading && (_jsx(Skeleton, { variant: "text", width: "4rem", height: "2.5rem" })), !isLoading && (_jsx(Typography, { variant: "globalXL", color: theme => theme.palette.new.text.neutral.default, fontWeight: "fontWeightSemiBold", children: completedCount }))] }), _jsx(Divider, { sx: { mx: 2 } }), _jsx(Stack, { sx: { p: 2, justifyContent: 'flex-end' }, children: _jsx(Stack, { sx: { height: 40, justifyContent: 'center' }, children: _jsx(Typography, { variant: "globalXXS", color: theme => theme.palette.new.text.neutral.default, children: labels.total }) }) })] })] }));
};
export default SurveyParticipationHeader;
