"use client";

import { useState } from "react";
import { Wifi, Copy, Check } from "lucide-react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { config } from "@/lib/config";

export default function WifiCard() {
  const [copied, setCopied] = useState(false);

  const handleCopyPassword = async () => {
    try {
      await navigator.clipboard.writeText(config.wifiPassword);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Erreur lors de la copie:", err);
    }
  };

  return (
    <Card className="bg-white">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Wifi className="h-6 w-6 text-primary" />
          Connexion WiFi
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-1">Nom du réseau</p>
          <p className="text-lg font-semibold text-primary">{config.wifiName}</p>
        </div>
        <Button
          onClick={handleCopyPassword}
          className="w-full h-14 text-lg"
          size="lg"
        >
          {copied ? (
            <>
              <Check className="mr-2 h-5 w-5" />
              Mot de passe copié !
            </>
          ) : (
            <>
              <Copy className="mr-2 h-5 w-5" />
              Copier le mot de passe
            </>
          )}
        </Button>
      </CardContent>
    </Card>
  );
}