Profile Card

import { ProfileCard } from "@/components/ui/profile-card";

const mockProfiles = [
  {
    firstName: "John",
    middleName: "W.",
    lastName: "Doe",
    email: "doe@example.com",
    phone: "+1 (999) 123-45-67",
    city: "Los Angeles",
    avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face",
    skills: [
      { name: "React", level: 4 },
      { name: "TypeScript", level: 3 },
      { name: "Node.js", level: 4 },
      { name: "Tailwind", level: 5 },
      { name: "PostgreSQL", level: 3 },
      { name: "Docker", level: 2 },
    ],
  },
  {
    firstName: "Karen",
    lastName: "Liy",
    email: "anna@example.com",
    city: "New York",
    skills: [{ name: "Figma" }, { name: "UI/UX" }, { name: "Design Systems" }],
  },
  {
    firstName: "Alex",
    lastName: "Johnson",
    email: "alex@example.com",
    phone: "+1 (555) 987-65-43",
    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
    skills: [{ name: "Python" }, { name: "ML" }],
  },
]

export default function ProfileCardDemo() {
  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Basic */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Profile Card</h3>
        <ProfileCard profile={mockProfiles[0]} />
      </div>

      {/* Clickable */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Clickable Card</h3>
        <ProfileCard 
          profile={mockProfiles[0]} 
          onClick={() => alert("Profile clicked!")}
        />
      </div>

      {/* Without Avatar */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Without Avatar (Shows Initials)</h3>
        <ProfileCard profile={mockProfiles[1]} />
      </div>

      {/* Grid of Cards */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Cards Grid</h3>
        <div className="grid md:grid-cols-2 gap-4">
          {mockProfiles.map((profile, i) => (
            <ProfileCard 
              key={i} 
              profile={profile} 
              onClick={() => alert(`Clicked: ${profile.firstName}`)}
            />
          ))}
        </div>
      </div>

      {/* Max Skills */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Limited Skills (max 3)</h3>
        <ProfileCard profile={mockProfiles[0]} maxSkills={3} />
      </div>
    </div>
  )
}