// mui
import { Button, IconButton, Card, Stack, Typography } from '@mui/material';
import { Visibility as VisibilityIcon } from '@mui/icons-material';
// components
import Iconify from '../../../components/Iconify';

export default function CardPersonalInformation() {
  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">Informasi Pribadi</Typography>
        <Button startIcon={<Iconify icon="heroicons:pencil-solid" />}>Edit Data</Button>
      </Stack>
      {/* Stack 2 */}
      <Stack direction="row" spacing={2} paddingX={2}>
        <div style={{ position: 'relative', flex: 'none', height: 'fit-content' }}>
          <img
            width={52}
            height={52}
            src="/images/user-profile.png"
            alt="user-profile"
            style={{ borderRadius: '50%' }}
          />
          <IconButton
            color="primary"
            sx={{
              position: 'absolute',
              bottom: 0,
              right: 0,
              width: '20px',
              height: '20px',
              padding: '4px',
              backgroundColor: 'rgba(255,255,255,0.9)',
            }}
          >
            <Iconify icon="material-symbols:photo-camera" />
          </IconButton>
        </div>
        <Stack direction="row" paddingY={1} spacing={2} sx={{ flex: '100%' }}>
          <Stack sx={{ width: '60%' }}>
            <Typography variant="caption">Nama Lengkap</Typography>
            <Typography variant="body2">Jessica Lie</Typography>
          </Stack>
          <Stack sx={{ width: '20%' }}>
            <Typography variant="caption">Berat Badan</Typography>
            <Typography variant="body2">40 kg</Typography>
          </Stack>
          <Stack sx={{ width: '20%' }}>
            <Typography variant="caption">Tinggi Badan</Typography>
            <Typography variant="body2">165 cm</Typography>
          </Stack>
        </Stack>
      </Stack>
      {/* Stack 3 */}
      <Stack maxHeight="338px" paddingX={2} sx={{ overflowY: 'auto' }}>
        {/* Stack 3.1 */}
        <Stack marginTop={2} spacing={1}>
          <Typography variant="subtitle2">Informasi Dasar</Typography>
          <Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
            <Stack sx={{ width: '100%' }}>
              <Typography variant="caption">Tempat Lahir</Typography>
              <Typography variant="body2">Jakarta</Typography>
            </Stack>
            <Stack sx={{ width: '100%' }}>
              <Typography variant="caption">Tanggal Lahir</Typography>
              <Typography variant="body2">15-05-1996</Typography>
            </Stack>
            <Stack sx={{ width: '100%' }}>
              <Typography variant="caption">Jenis Kelamin</Typography>
              <Typography variant="body2">Perempuan</Typography>
            </Stack>
          </Stack>
        </Stack>
        {/* Stack 3.2 */}
        <Stack marginTop={2} spacing={1}>
          <Typography variant="subtitle2">Informasi Kontak</Typography>
          <Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
            <Stack sx={{ width: '100%' }}>
              <Typography variant="caption">Nomor Telpon</Typography>
              <Typography variant="body2">081256788765</Typography>
            </Stack>
            <Stack sx={{ width: '100%' }}>
              <Typography variant="caption">Email</Typography>
              <Typography variant="body2">Jessica.lie@gmail.com</Typography>
            </Stack>
          </Stack>
          <Stack>
            <Typography variant="caption">Alamat</Typography>
            <Typography variant="body2">
              Jl. Kalimantan No.6, Rw. Mekar Jaya, Kec. Serpong, Kota Tangerang Selatan, Banten
              15310
            </Typography>
          </Stack>
        </Stack>
        {/* Stack 3.3 */}
        <Stack marginTop={2} spacing={1}>
          <Typography variant="subtitle2">Identitas Diri</Typography>
          <Stack
            direction="row"
            justifyContent="space-between"
            alignItems="center"
            spacing={2}
            sx={{ flex: '100%' }}
          >
            <Stack>
              <Typography variant="caption">Nomor NIK</Typography>
              <Typography variant="body2">081256788765</Typography>
            </Stack>
            <Stack>
              <Button variant="contained" startIcon={<VisibilityIcon />}>
                Lihat Foto
              </Button>
            </Stack>
          </Stack>
        </Stack>
        {/* Stack 3.4 */}
        <Stack marginTop={2} spacing={1}>
          <Typography variant="subtitle2">Informasi Lainnya</Typography>
          <Stack direction="row" justifyContent="space-between" spacing={2} sx={{ flex: '100%' }}>
            <Stack>
              <Typography variant="caption">Agama</Typography>
              <Typography variant="body2">Kristen</Typography>
            </Stack>
            <Stack>
              <Typography variant="caption">Status</Typography>
              <Typography variant="body2">Menikah</Typography>
            </Stack>
            <Stack>
              <Typography variant="caption">Pendidikan</Typography>
              <Typography variant="body2">S1</Typography>
            </Stack>
            <Stack>
              <Typography variant="caption">Pekerjaan</Typography>
              <Typography variant="body2">Ibu Rumah Tangga</Typography>
            </Stack>
          </Stack>
        </Stack>
      </Stack>
    </Card>
  );
}
