import Image from "next/image";
import { LinkedinIcon } from "@/components/social-icons";
import type { TeamMemberRow } from "@/lib/types";

export function TeamGrid({ members }: { members: TeamMemberRow[] }) {
  if (members.length === 0) return null;
  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {members.map((m) => (
        <article
          key={m.$id}
          className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white transition hover:shadow-md"
        >
          <div className="relative aspect-square overflow-hidden bg-gradient-to-br from-[var(--sky-50)] to-[var(--navy-50)]">
            {m.photo_url ? (
              <Image
                src={m.photo_url}
                alt={m.name}
                fill
                sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
                className="object-cover"
              />
            ) : (
              <div className="flex h-full items-center justify-center text-6xl font-bold text-[var(--navy)]/30">
                {m.name.charAt(0)}
              </div>
            )}
          </div>
          <div className="p-5">
            <h3 className="text-base font-semibold text-[var(--navy)]">
              {m.name}
            </h3>
            {m.role && (
              <p className="text-xs text-[var(--sky-600)]">{m.role}</p>
            )}
            {m.bio && (
              <p className="mt-3 text-sm leading-relaxed text-[var(--muted)]">
                {m.bio}
              </p>
            )}
            {m.linkedin_url && (
              <a
                href={m.linkedin_url}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-[var(--sky-600)] hover:text-[var(--navy)]"
              >
                <LinkedinIcon className="size-3.5" />
                LinkedIn'de bağlan
              </a>
            )}
          </div>
        </article>
      ))}
    </div>
  );
}