'use client';

import { AgentCard } from '../ui/AgentCard';

// Sample featured agents data
const featuredAgents = [
  {
    id: '1',
    name: 'Andrew Collins',
    title: 'Rental & Investment Consultant',
    location: 'New York',
    rating: 4.8,
    reviewCount: 124,
    experience: '8+ years in the real estate industry',
    expertise: ['Residential', 'Commercial', 'Investment'],
    imageUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
    isVerified: true,
  },
  {
    id: '2',
    name: 'Dempsi',
    title: 'Real Estate & Investment Consultant',
    location: 'Atlanta',
    rating: 4.9,
    reviewCount: 98,
    experience: '5+ years in the real estate industry',
    expertise: ['Luxury Homes', 'First-time Buyers'],
    imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
    isVerified: true,
  },
  {
    id: '3',
    name: 'Daniel',
    title: 'Rental & Investment Consultant',
    location: 'San Diego',
    rating: 4.7,
    reviewCount: 156,
    experience: '7 years in the real estate industry',
    expertise: ['Property Management', 'Rentals'],
    imageUrl: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop',
    isVerified: true,
  },
];

export function FeaturedAgents() {
  return (
    <section className="py-16 md:py-24 bg-[#f5f9f8]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {featuredAgents.map((agent) => (
            <AgentCard
              key={agent.id}
              name={agent.name}
              title={agent.title}
              location={agent.location}
              rating={agent.rating}
              reviewCount={agent.reviewCount}
              experience={agent.experience}
              expertise={agent.expertise}
              imageUrl={agent.imageUrl}
              isVerified={agent.isVerified}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
