
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import {Link} from "react-router-dom";
import {useEffect, useState} from "react";
import DOMPurify from "dompurify";

type NewsItem = {
  id: number,
  title: string,
  date?: string;
  description: string;
  image_url?: string;
  created_at: string;
}

const NewsSection = () => {

  const [news, setNews] = useState<NewsItem[]>([]);

  const fetchNews = async () => {
    try{
      const res = await fetch(`${import.meta.env.VITE_API_URL}/api/news`);
      const data = await res.json();
      setNews(data);
    }catch(error){
      console.error("Fehler beim Laden der News:", error);
    }
  };

  useEffect(() => {
    fetchNews();
  }, []);

  return (
    <section id="news" className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">Aktuelles</h2>
          <p className="mt-4 text-xl text-gray-600">Die neuesten Meldungen aus unserem Vereinsleben</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {news.map((item) => (
          <Card key={item.id} className="overflow-hidden hover:shadow-lg transition-shadow">
            <div className="h-48 overflow-hidden">
            <img
              src={
                item.image_url
                  ? `${import.meta.env.VITE_API_URL}${item.image_url}`
                  : "/images/default-news.jpg"
              }
              alt={item.title}
              className="w-full h-full object-cover"
            />
            </div>
            <CardHeader>
              <CardTitle>{item.title}</CardTitle>
              <CardDescription>
                {new Date(item.created_at).toLocaleDateString("de-DE")}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div
                className="text-gray-700 line-clamp-3 prose max-w-none prose-p:my-1 prose-a:text-frog-600"
                dangerouslySetInnerHTML={{
                  __html: DOMPurify.sanitize(item.description),
                }}
              />
            </CardContent>
            <CardFooter>
              <Link to="/alle-neuigkeiten" className="ml-auto">
                <Button variant="ghost" className="text-frog-600 hover:text-frog-700 p-0 hover:bg-transparent">
                  Weiterlesen <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
            </CardFooter>
          </Card>
        ))}
        </div>

        <div className="text-center mt-12">
          <Link to="/alle-neuigkeiten">
            <Button variant="outline" className="border-frog-500 text-frog-600 hover:bg-frog-50">
              Alle Neuigkeiten
            </Button>
          </Link>
        </div>
      </div>
    </section>
  );
};

export default NewsSection;
