"use client"

import Link from "next/link"
import { ChevronRight, ShieldCheck, UserRound } from "lucide-react"
import { AccountAvatar } from "@/components/suite/account-avatar"
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"

const CARDS = [
  {
    href: "/compte/informations",
    icon: UserRound,
    title: "Informations personnelles",
    description:
      "Consultez votre nom, votre adresse e-mail et votre identifiant Ulti.",
  },
  {
    href: "/compte/securite",
    icon: ShieldCheck,
    title: "Sécurité",
    description:
      "Gérez votre mot de passe, la validation en deux étapes et vos sessions.",
  },
] as const

export function CompteHomeSection() {
  const identity = useChromeIdentity()

  return (
    <>
      <header className="mb-8 flex flex-col items-center text-center">
        {identity ? (
          <AccountAvatar
            account={{ name: identity.name, email: identity.email }}
            size="lg"
          />
        ) : (
          <div className="size-20 rounded-full bg-muted" aria-hidden />
        )}
        <h2 className="mt-4 text-2xl font-normal text-foreground">
          {identity ? `Bonjour ${identity.firstName} !` : "Votre compte Ulti"}
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          Gérez vos informations et la sécurité de votre compte sur l&apos;ensemble
          de la suite Ulti.
        </p>
        {identity ? (
          <p className="mt-1 text-sm text-muted-foreground">{identity.email}</p>
        ) : null}
      </header>

      <div className="grid gap-4 sm:grid-cols-2">
        {CARDS.map((card) => {
          const Icon = card.icon
          return (
            <Link
              key={card.href}
              href={card.href}
              className="group flex flex-col rounded-2xl border border-border bg-background p-5 transition-colors hover:bg-accent"
            >
              <Icon className="size-6 text-muted-foreground" aria-hidden />
              <span className="mt-3 flex items-center gap-1 text-sm font-medium text-foreground">
                {card.title}
                <ChevronRight
                  className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5"
                  aria-hidden
                />
              </span>
              <span className="mt-1 text-sm text-muted-foreground">
                {card.description}
              </span>
            </Link>
          )
        })}
      </div>
    </>
  )
}