import { useQuery } from "@tanstack/react-query";
import { useTenant } from "@/contexts/TenantContext";
import { User } from "lucide-react";

interface Trainer {
  id: string;
  first_name: string;
  last_name: string;
  email: string | null;
  notes: string | null;
}

const LocktelTeamGrid = () => {
  const { branding } = useTenant();

  const { data: trainers = [] } = useQuery<Trainer[]>({
    queryKey: ["locktel-trainers", branding?.company_id],
    queryFn: async () => {
      if (!branding) return [];
      try {
        const res = await fetch(`/api/locktel/trainers?company_id=${encodeURIComponent(branding.company_id)}`);
        if (!res.ok) return [];
        const data = await res.json();
        return Array.isArray(data) ? data : [];
      } catch {
        return [];
      }
    },
    enabled: !!branding,
  });

  if (trainers.length === 0) return null;

  return (
    <section className="container mx-auto px-4 py-16">
      <h2 className="text-3xl font-bold text-foreground mb-2 text-center">Our Team</h2>
      <p className="text-muted-foreground text-center mb-10">Experienced professionals delivering your training</p>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {trainers.map((t) => (
          <div key={t.id} className="bg-card border border-border rounded-xl p-6 text-center">
            <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
              <User className="w-10 h-10 text-primary" />
            </div>
            <h3 className="font-semibold text-card-foreground">{t.first_name} {t.last_name}</h3>
            {t.notes && (
              <p className="text-sm text-muted-foreground mt-2 line-clamp-3">{t.notes}</p>
            )}
          </div>
        ))}
      </div>
    </section>
  );
};

export default LocktelTeamGrid;