"use client";

import { RefreshCw } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { useEffect, useState } from "react";

interface Quote {
  quote: string;
  author: string;
}

export function QuoteCard() {
  const fetchQuote = async (): Promise<Quote> => {
    // Récupere la liste des citations depuis le fichier dans /public/quotes.json
    const response = await fetch("/quotes.json");
    const data = await response.json();

    // Retourne une citation aléatoire
    return data[Math.floor(Math.random() * data.length)];
  };

  const [quote, setQuote] = useState<Quote | null>(null);

  useEffect(() => {
    fetchQuote().then(setQuote);
  }, []);

  const handleRefresh = () => {
    fetchQuote().then(setQuote);
  };

  return (
    <Card className='relative transition-transform duration-500 ease-in-out transform hover:scale-105'>
      <CardContent className='p-6'>
        <blockquote className='space-y-2'>
          <p className='text-lg'>{quote ? quote.quote : "Loading..."}</p>
          <footer className='text-sm text-gray-500'>
            {quote ? quote.author : "Loading..."}
          </footer>
        </blockquote>
        <button
          className='absolute bottom-4 right-4 p-1 hover:bg-gray-100 rounded-full'
          onClick={handleRefresh}
        >
          <RefreshCw className='w-4 h-4' />
        </button>
      </CardContent>
    </Card>
  );
}