// mui
import { Button, Card, Stack, Typography, Grid, Switch } from '@mui/material';
// components
import Iconify from '../../../components/Iconify';

export default function CardFamilyInformation() {
  return (
    <Card sx={{ borderRadius: '6px', paddingY: 2 }}>
      {/* Stack 1 */}
      <Stack
        direction="row"
        alignItems="center"
        justifyContent="space-between"
        sx={{ paddingY: 1, paddingX: 3 }}
      >
        <Typography variant="subtitle2">Beneficiary / Family</Typography>
        <Button startIcon={<Iconify icon="ic:round-add" />}>Add Member</Button>
      </Stack>
      {/* Stack 2 */}
      <Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
        {/* Card 1 */}
        <Grid item xs={12} sm={6} md={6}>
          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
            {/* Stack 1 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              spacing={2}
              sx={{ flex: '100%' }}
            >
              {/* Row 1 */}
              <Stack direction="row" spacing={1}>
                <img
                  width={24}
                  height={24}
                  src="/images/husband-user-profile.png"
                  alt="user-profile"
                  style={{ borderRadius: '50%' }}
                />
                <Typography variant="body2" sx={{ fontWeight: 500 }}>
                  Husband
                </Typography>
              </Stack>
              {/* Row 2 */}
              <Stack alignItems="center">
                <Typography variant="caption">Suspend</Typography>
                <Switch aria-label="switch demo" />
              </Stack>
            </Stack>
            <Typography variant="body2" color="#757575">
              Octa Xavier
            </Typography>
            <Typography variant="body2" color="#757575">
              14 Jan 1986
            </Typography>
            <Typography variant="body2" color="#757575">
              082113256754
            </Typography>
            {/* Stack 2 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              marginTop={1.25}
            >
              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
                Remove
              </Button>
              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
                Edit Data
              </Button>
            </Stack>
          </Card>
        </Grid>
        {/* Card 2 */}
        <Grid item xs={12} sm={6} md={6}>
          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
            {/* Stack 1 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              spacing={2}
              sx={{ flex: '100%' }}
            >
              {/* Row 1 */}
              <Stack direction="row" spacing={1}>
                <div
                  style={{
                    borderRadius: '50%',
                    width: '24px',
                    height: '24px',
                    backgroundColor: '#D9D9D9',
                  }}
                />
                <Typography variant="body2" sx={{ fontWeight: 500 }}>
                  Kid
                </Typography>
              </Stack>
              {/* Row 2 */}
              <Stack alignItems="center">
                <Typography variant="caption">Suspend</Typography>
                <Switch aria-label="switch demo" />
              </Stack>
            </Stack>
            <Typography variant="body2" color="#757575">
              Celine Claudia
            </Typography>
            <Typography variant="body2" color="#757575">
              15 Oct 2000
            </Typography>
            <Typography variant="body2" color="#757575">
              082113256754
            </Typography>
            {/* Stack 2 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              marginTop={1.25}
            >
              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
                Remove
              </Button>
              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
                Edit Data
              </Button>
            </Stack>
          </Card>
        </Grid>
        {/* Card 3 */}
        <Grid item xs={12} sm={6} md={6}>
          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
            {/* Stack 1 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              spacing={2}
              sx={{ flex: '100%' }}
            >
              {/* Row 1 */}
              <Stack direction="row" spacing={1}>
                <div
                  style={{
                    borderRadius: '50%',
                    width: '24px',
                    height: '24px',
                    backgroundColor: '#D9D9D9',
                  }}
                />
                <Typography variant="body2" sx={{ fontWeight: 500 }}>
                  Kid
                </Typography>
              </Stack>
              {/* Row 2 */}
              <Stack alignItems="center">
                <Typography variant="caption">Suspend</Typography>
                <Switch aria-label="switch demo" />
              </Stack>
            </Stack>
            <Typography variant="body2" color="#757575">
              Celine Claudia
            </Typography>
            <Typography variant="body2" color="#757575">
              15 Oct 2000
            </Typography>
            <Typography variant="body2" color="#757575">
              082113256754
            </Typography>
            {/* Stack 2 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              marginTop={1.25}
            >
              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
                Remove
              </Button>
              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
                Edit Data
              </Button>
            </Stack>
          </Card>
        </Grid>
        {/* Card 4 */}
        <Grid item xs={12} sm={6} md={6}>
          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
            {/* Stack 1 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              spacing={2}
              sx={{ flex: '100%' }}
            >
              {/* Row 1 */}
              <Stack direction="row" spacing={1}>
                <div
                  style={{
                    borderRadius: '50%',
                    width: '24px',
                    height: '24px',
                    backgroundColor: '#D9D9D9',
                  }}
                />
                <Typography variant="body2" sx={{ fontWeight: 500 }}>
                  Kid
                </Typography>
              </Stack>
              {/* Row 2 */}
              <Stack alignItems="center">
                <Typography variant="caption">Suspend</Typography>
                <Switch aria-label="switch demo" />
              </Stack>
            </Stack>
            <Typography variant="body2" color="#757575">
              Celine Claudia
            </Typography>
            <Typography variant="body2" color="#757575">
              15 Oct 2000
            </Typography>
            <Typography variant="body2" color="#757575">
              082113256754
            </Typography>
            {/* Stack 2 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              marginTop={1.25}
            >
              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
                Remove
              </Button>
              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
                Edit Data
              </Button>
            </Stack>
          </Card>
        </Grid>
        {/* Card 5 */}
        <Grid item xs={12} sm={6} md={6}>
          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
            {/* Stack 1 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              spacing={2}
              sx={{ flex: '100%' }}
            >
              {/* Row 1 */}
              <Stack direction="row" spacing={1}>
                <div
                  style={{
                    borderRadius: '50%',
                    width: '24px',
                    height: '24px',
                    backgroundColor: '#D9D9D9',
                  }}
                />
                <Typography variant="body2" sx={{ fontWeight: 500 }}>
                  Kid
                </Typography>
              </Stack>
              {/* Row 2 */}
              <Stack alignItems="center">
                <Typography variant="caption">Suspend</Typography>
                <Switch aria-label="switch demo" />
              </Stack>
            </Stack>
            <Typography variant="body2" color="#757575">
              Celine Claudia
            </Typography>
            <Typography variant="body2" color="#757575">
              15 Oct 2000
            </Typography>
            <Typography variant="body2" color="#757575">
              082113256754
            </Typography>
            {/* Stack 2 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              marginTop={1.25}
            >
              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
                Remove
              </Button>
              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
                Edit Data
              </Button>
            </Stack>
          </Card>
        </Grid>
        {/* Card 6 */}
        <Grid item xs={12} sm={6} md={6}>
          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
            {/* Stack 1 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              spacing={2}
              sx={{ flex: '100%' }}
            >
              {/* Row 1 */}
              <Stack direction="row" spacing={1}>
                <div
                  style={{
                    borderRadius: '50%',
                    width: '24px',
                    height: '24px',
                    backgroundColor: '#D9D9D9',
                  }}
                />
                <Typography variant="body2" sx={{ fontWeight: 500 }}>
                  Kid
                </Typography>
              </Stack>
              {/* Row 2 */}
              <Stack alignItems="center">
                <Typography variant="caption">Suspend</Typography>
                <Switch aria-label="switch demo" />
              </Stack>
            </Stack>
            <Typography variant="body2" color="#757575">
              Celine Claudia
            </Typography>
            <Typography variant="body2" color="#757575">
              15 Oct 2000
            </Typography>
            <Typography variant="body2" color="#757575">
              082113256754
            </Typography>
            {/* Stack 2 */}
            <Stack
              direction="row"
              alignItems="center"
              justifyContent="space-between"
              marginTop={1.25}
            >
              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
                Remove
              </Button>
              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
                Edit Data
              </Button>
            </Stack>
          </Card>
        </Grid>
      </Grid>
    </Card>
  );
}
