import { cva } from "class-variance-authority"

import Card from "@/components/MyProfile/Card"
import Image from "@/components/Image"
import LabelAndIcon from "../LabelAndIcon"

import styles from "./profile.module.css"

import type { ProfileProps } from "@/types/components/myPages/myProfile/profile"

const profileStyles = cva(styles.profile)

export default function Profile({ className, user, ...props }: ProfileProps) {
  return (
    <Card className={profileStyles({ className })} {...props}>
      <header className={styles.header}>
        <Image
          alt="Account Icon"
          height={40}
          src="/account_circle.svg"
          width={40}
        />
        <Card.Title uppercase>
          {user.name}
        </Card.Title>
      </header>
      <section className={styles.info}>
        <LabelAndIcon>
          <LabelAndIcon.Icon>SE</LabelAndIcon.Icon>
          <LabelAndIcon.Label>Country</LabelAndIcon.Label>
          <LabelAndIcon.Content>Sweden</LabelAndIcon.Content>
        </LabelAndIcon>
        <LabelAndIcon>
          <LabelAndIcon.Icon>
            <Image
              alt="Calendar Icon"
              height={20}
              src="/calendar_month.svg"
              width={20}
            />
          </LabelAndIcon.Icon>
          <LabelAndIcon.Label>Date of Birth</LabelAndIcon.Label>
          <LabelAndIcon.Content>27/05/1977</LabelAndIcon.Content>
        </LabelAndIcon>
        <LabelAndIcon>
          <LabelAndIcon.Icon>
            <Image
              alt="Email Icon"
              height={20}
              src="/alternate_email.svg"
              width={20}
            />
          </LabelAndIcon.Icon>
          <LabelAndIcon.Label>Email</LabelAndIcon.Label>
          <LabelAndIcon.Content>f*********@g****.com</LabelAndIcon.Content>
        </LabelAndIcon>
        <LabelAndIcon>
          <LabelAndIcon.Icon>
            <Image
              alt="Cellphone Icon"
              height={20}
              src="/phone.svg"
              width={20}
            />
          </LabelAndIcon.Icon>
          <LabelAndIcon.Label>Phone number</LabelAndIcon.Label>
          <LabelAndIcon.Content>+46 ******00</LabelAndIcon.Content>
        </LabelAndIcon>
        <LabelAndIcon>
          <LabelAndIcon.Icon>
            <Image
              alt="House Icon"
              height={20}
              src="/home.svg"
              width={20}
            />
          </LabelAndIcon.Icon>
          <LabelAndIcon.Label>Address</LabelAndIcon.Label>
          <LabelAndIcon.Content>T***************</LabelAndIcon.Content>
        </LabelAndIcon>
        <LabelAndIcon>
          <LabelAndIcon.Icon>
            <Image
              alt="House Icon"
              height={20}
              src="/home.svg"
              width={20}
            />
          </LabelAndIcon.Icon>
          <LabelAndIcon.Label>City/State</LabelAndIcon.Label>
          <LabelAndIcon.Content>S*******</LabelAndIcon.Content>
        </LabelAndIcon>
        <LabelAndIcon>
          <LabelAndIcon.Icon>
            <Image
              alt="House Icon"
              height={20}
              src="/home.svg"
              width={20}
            />
          </LabelAndIcon.Icon>
          <LabelAndIcon.Label>Zip code</LabelAndIcon.Label>
          <LabelAndIcon.Content>1****</LabelAndIcon.Content>
        </LabelAndIcon>
      </section>
    </Card>
  )
}