import type { CoreMemberDetailed } from "@/lib/features/members/types";
import { Flex, Grid, Text, TextInput } from "@mantine/core";
import { IconFileDescription } from "@tabler/icons-react";
import moment from "moment";
import styles from "@/routes/promo-code-campaigns/_components/promo.module.css";

const ContactDetails: React.FC<{ member: CoreMemberDetailed }> = ({
  member,
}) => {
  return (
    <Flex direction={"column"} gap={28}>
      <Flex gap={8} align={"center"}>
        <span className={styles.sectionIcon}>
          <IconFileDescription size={15} />
        </span>
        <Text fz={14} fw={600}>
          Personal Information
        </Text>
      </Flex>
      <form>
        <Grid gutter={"lg"}>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Email"
              radius={4}
              disabled
              value={member.email}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Mobile"
              radius={4}
              disabled
              value={member?.mobile}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Date Of Birth"
              radius={4}
              disabled
              value={moment(member?.date_of_birth).format("MM/DD/YYYY")}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Anniversary Date"
              radius={4}
              disabled
              value={
                member?.date_of_anniversary
                  ? moment(member?.date_of_anniversary).format("MM/DD/YYYY")
                  : "NA"
              }
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Address 1"
              radius={4}
              disabled
              value={member?.address_line_one}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Address 2"
              radius={4}
              disabled
              value={member.address_line_two}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Nationality"
              radius={4}
              disabled
              value={member?.nationality}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Country"
              radius={4}
              disabled
              value={member?.country}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Town"
              radius={4}
              disabled
              value={member?.city}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="State"
              radius={4}
              disabled
              value={member?.state}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Pincode"
              radius={4}
              disabled
              value={member?.postcode}
            />
          </Grid.Col>
        </Grid>
      </form>
    </Flex>
  );
};

export default ContactDetails;