"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { ArrowRight, Users } from "lucide-react";
import TeamMemberCard, {
  type TeamMemberView,
} from "@/components/team/TeamMemberCard";

export default function TeamPreview({ members }: { members: TeamMemberView[] }) {
  if (members.length === 0) return null;

  return (
    <section className="max-w-7xl mx-auto px-6 lg:px-10 mt-24 lg:mt-32">
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-50px" }}
        transition={{ duration: 0.5 }}
        className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-8"
      >
        <div>
          <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full glass text-xs text-brand-200 mb-3">
            <Users className="w-3.5 h-3.5" />
            Takımımız
          </span>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold heading-gradient">
            Tanışın
          </h2>
          <p className="mt-2 text-brand-300 max-w-xl">
            Source Setups’u oluşturan profesyonellerin küçük bir önizlemesi.
          </p>
        </div>
        <Link href="/takimimiz" className="btn-secondary self-start md:self-end">
          Tüm Takımı Gör
          <ArrowRight className="w-4 h-4" />
        </Link>
      </motion.div>

      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {members.slice(0, 3).map((m) => (
          <TeamMemberCard key={m._id} member={m} />
        ))}
      </div>
    </section>
  );
}