"use client";

export function TabProfil() {
  return (
    <div className="space-y-6 max-w-xl">
      {/* Photo de profil */}
      <div className="bg-bg-card border border-border rounded-xl p-5">
        <div className="text-[13px] font-semibold text-text mb-4">Photo de profil</div>
        <div className="flex items-center gap-4">
          <div className="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-accent flex items-center justify-center text-[18px] font-bold text-white shrink-0">
            AR
          </div>
          <div>
            <button className="px-3 py-2 rounded-lg text-[12.5px] font-medium border border-border hover:bg-bg-card-hover transition-colors text-text-dim">
              Changer la photo
            </button>
            <p className="text-[11px] text-text-dimmer mt-1.5">JPG, PNG ou WebP · max 2 Mo</p>
          </div>
        </div>
      </div>

      {/* Champs */}
      <div className="bg-bg-card border border-border rounded-xl p-5 space-y-4">
        <div className="text-[13px] font-semibold text-text mb-1">Informations personnelles</div>

        <Field label="Nom complet" defaultValue="Adam Rotard" type="text" />
        <Field label="Email" defaultValue="adamrotard@gmail.com" type="email" />
        <Field label="Téléphone" defaultValue="+33 6 12 34 56 78" type="tel" />

        <div>
          <label className="block text-[12px] font-medium text-text-dim mb-1.5">Langue</label>
          <select className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright">
            <option value="fr">Français</option>
            <option value="en">English</option>
          </select>
        </div>

        <div>
          <label className="block text-[12px] font-medium text-text-dim mb-1.5">Fuseau horaire</label>
          <select className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright">
            <option>Europe/Paris (UTC+2)</option>
            <option>Europe/London (UTC+1)</option>
            <option>America/New_York (UTC-4)</option>
          </select>
        </div>
      </div>

      <button className="px-5 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity">
        Enregistrer
      </button>
    </div>
  );
}

function Field({
  label,
  defaultValue,
  type,
}: {
  label: string;
  defaultValue: string;
  type: string;
}) {
  return (
    <div>
      <label className="block text-[12px] font-medium text-text-dim mb-1.5">{label}</label>
      <input
        type={type}
        defaultValue={defaultValue}
        className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright placeholder:text-text-dimmer"
      />
    </div>
  );
}