import { useQuery } from "@tanstack/react-query";
import { News } from "@shared/schema";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { format } from "date-fns";
import { Loader2, ChevronRight } from "lucide-react";
import { useLanguage } from "@/hooks/use-language";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";

export default function NewsListPage() {
  const { language } = useLanguage();
  const { data: news, isLoading } = useQuery<News[]>({
    queryKey: ["/api/news"],
  });

  if (isLoading) {
    return (
      <div className="flex justify-center">
        <Loader2 className="h-8 w-8 animate-spin" />
      </div>
    );
  }

  return (
    <div className={`space-y-8 ${language === 'ar' ? 'rtl' : 'ltr'}`}>
      <h1 className="text-3xl font-bold">
        {language === 'en' ? 'Latest News' : 'آخر الأخبار'}
      </h1>

      <div className="grid gap-8">
        {news?.map((item) => (
          <Card key={item.id} className="overflow-hidden">
            <CardContent className="p-6">
              <div className="flex flex-col md:flex-row gap-6">
                {item.image && (
                  <div className="w-full md:w-1/3">
                    <img
                      src={item.image}
                      alt={language === 'en' ? item.title : item.titleAr}
                      className="rounded-lg w-full h-48 object-cover"
                    />
                  </div>
                )}
                <div className="flex-1 space-y-4">
                  <div>
                    <h2 className="text-2xl font-semibold mb-2">
                      {language === 'en' ? item.title : item.titleAr}
                    </h2>
                    <time className="text-sm text-muted-foreground">
                      {format(new Date(item.publishDate), 
                        language === 'ar' ? 'dd MMMM yyyy' : 'MMMM dd, yyyy'
                      )}
                    </time>
                  </div>
                  <p className="text-muted-foreground line-clamp-3">
                    {language === 'en' ? item.content : item.contentAr}
                  </p>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-end p-6 pt-0">
              <Button asChild>
                <Link href={`/news/${item.id}`}>
                  {language === 'en' ? (
                    <>
                      Read More
                      <ChevronRight className="ml-2 h-4 w-4" />
                    </>
                  ) : (
                    <>
                      اقرأ المزيد
                      <ChevronRight className="mr-2 h-4 w-4" />
                    </>
                  )}
                </Link>
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
}