"use client";

import { useEffect, useState } from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { LexiqueItem } from "@/app/api/infos/route";

export default function LexiqueSection() {
  const [lexiqueItems, setLexiqueItems] = useState<LexiqueItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchLexique = async () => {
      try {
        const response = await fetch("/api/infos?type=lexique");
        const data = await response.json();
        setLexiqueItems(data);
      } catch (error) {
        console.error("Erreur lors du chargement du lexique:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchLexique();
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
        <p className="text-gray-600">Chargement...</p>
      </div>
    );
  }

  return (
    <Card className="bg-secondary">
      <CardHeader>
        <CardTitle>Lexique Tahitien</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {lexiqueItems.map((item) => (
            <div
              key={item.id}
              className="border-b border-primary/20 pb-4 last:border-0 last:pb-0"
            >
              <div className="flex items-start justify-between mb-2">
                <h3 className="text-lg font-semibold text-primary">
                  {item.mot}
                </h3>
                <span className="text-sm font-medium text-gray-600">
                  {item.traduction}
                </span>
              </div>
              <p className="text-sm text-gray-700">{item.description}</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}