'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
import { useTranslation } from 'react-i18next';

export default function SampleSecurityCard(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar>
            <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.security')}
      />
      <CardContent>
        <Stack spacing={1}>
          <div>
            <Button
              color="error"
              variant="contained"
            >
              {t('Delete account')}
            </Button>
          </div>
          <Typography
            color="text.secondary"
            variant="body2"
          >
            {t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
          </Typography>
        </Stack>
      </CardContent>
    </Card>
  );
}