import { MapPin, Star, ExternalLink } from 'lucide-react';

interface Vendor {
  id: string;
  name: string;
  logo?: string;
  coverImage?: string;
  description: string;
  rating: number;
  reviewCount: number;
  productCount: number;
  joinedDate: string;
  location?: string;
  verified?: boolean;
}

interface VendorCardProps {
  vendor: Vendor;
  variant?: 'default' | 'compact' | 'featured';
}

export default function VendorCard({ vendor, variant = 'default' }: VendorCardProps) {
  const isCompact = variant === 'compact';
  const isFeatured = variant === 'featured';

  return (
    <div className={`
      bg-white rounded-xl border overflow-hidden
      ${isFeatured ? 'ring-2 ring-blue-500' : ''}
      ${isCompact ? '' : 'shadow-sm hover:shadow-md transition-shadow'}
    `}>
      {/* Cover Image */}
      <div className="relative h-24 bg-gradient-to-r from-blue-500 to-purple-600">
        {vendor.coverImage && (
          <img 
            src={vendor.coverImage} 
            alt="" 
            className="w-full h-full object-cover"
          />
        )}
        <div className="absolute -bottom-8 left-4">
          <div className="w-16 h-16 rounded-xl border-4 border-white bg-gray-100 overflow-hidden shadow-md">
            {vendor.logo ? (
              <img src={vendor.logo} alt={vendor.name} className="w-full h-full object-cover" />
            ) : (
              <div className="w-full h-full flex items-center justify-center text-xl font-bold text-gray-400">
                {vendor.name.charAt(0)}
              </div>
            )}
          </div>
        </div>
        {vendor.verified && (
          <div className="absolute bottom-2 right-2 bg-blue-500 text-white text-xs px-2 py-0.5 rounded-full flex items-center gap-1">
            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
            </svg>
            รับรอง
          </div>
        )}
      </div>

      {/* Content */}
      <div className={`pt-10 ${isCompact ? 'px-4 pb-4' : 'p-4'}`}>
        <div className="flex items-start justify-between">
          <div>
            <h3 className="font-medium text-lg">{vendor.name}</h3>
            {vendor.location && (
              <p className="text-sm text-gray-500 flex items-center gap-1 mt-0.5">
                <MapPin className="w-3 h-3" />
                {vendor.location}
              </p>
            )}
          </div>
        </div>

        {!isCompact && (
          <p className="text-sm text-gray-600 mt-2 line-clamp-2">
            {vendor.description}
          </p>
        )}

        <div className="flex items-center gap-4 mt-3 text-sm">
          <div className="flex items-center gap-1">
            <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
            <span className="font-medium">{vendor.rating.toFixed(1)}</span>
            <span className="text-gray-500">({vendor.reviewCount})</span>
          </div>
          <span className="text-gray-300">|</span>
          <span className="text-gray-600">{vendor.productCount} สินค้า</span>
        </div>

        {!isCompact && (
          <a
            href={`/vendor/${vendor.id}`}
            className="mt-4 w-full flex items-center justify-center gap-2 py-2 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-colors"
          >
            <span>ดูร้านค้า</span>
            <ExternalLink className="w-4 h-4" />
          </a>
        )}
      </div>
    </div>
  );
}
