import { useQuery } from "@tanstack/react-query";
import { Speaker } from "@shared/schema";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { useLanguage } from "@/hooks/use-language";
import { ChevronRight } from "lucide-react";

export default function SpeakersPage() {
  const { language, t } = useLanguage();
  const { data: speakers, isLoading } = useQuery<Speaker[]>({
    queryKey: ["/api/speakers"],
  });

  if (isLoading) {
    return (
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[...Array(6)].map((_, i) => (
          <Card key={i}>
            <CardContent className="pt-6">
              <Skeleton className="h-24 w-24 rounded-full mx-auto mb-4" />
              <Skeleton className="h-6 w-3/4 mx-auto mb-2" />
              <Skeleton className="h-4 w-1/2 mx-auto" />
            </CardContent>
          </Card>
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-8">
      <h1 className="text-3xl font-bold text-center">
        {t("Our Speakers", "المتحدثون")}
      </h1>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {speakers?.map((speaker) => (
          <Card key={speaker.id}>
            <CardContent className="pt-6 text-center">
              <Avatar className="h-24 w-24 mx-auto mb-4">
                <AvatarImage src={speaker.imageUrl} alt={language === 'en' ? speaker.name : speaker.nameAr} />
                <AvatarFallback>{speaker.name[0]}</AvatarFallback>
              </Avatar>
              <CardTitle className="mb-2">{language === 'en' ? speaker.name : speaker.nameAr}</CardTitle>
              <p className="text-sm text-muted-foreground mb-2">
                {language === 'en' ? speaker.title : speaker.titleAr}
              </p>
              <p className="text-sm">{language === 'en' ? speaker.organization : speaker.organizationAr}</p>
              <div className="mt-4">
                <Button asChild>
                  <Link href={`/speakers/${speaker.id}`}>
                    {t("View Profile", "عرض الملف الشخصي")}
                    <ChevronRight className={`h-4 w-4 ${language === 'ar' ? 'rotate-180 me-2' : 'ms-2'}`} />
                  </Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}