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

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

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

import type { ContainerProps } from "@/types/components/myPages/myProfile/container"

const profileStyles = cva(styles.profile)

export default function Container({
  children,
  className,
  user,
  ...props
}: ContainerProps) {
  return (
    <Card className={profileStyles({ className })} {...props}>
      <header className={styles.header}>
        <Image
          alt="Account Icon"
          height={40}
          src="/_static/icons/account_circle.svg"
          width={40}
        />
        <Card.Title uppercase>{user.name}</Card.Title>
      </header>
      {children}
    </Card>
  )
}