"use client"

import React from 'react'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { 
  Building2,
  MapPin,
  Phone,
  Mail
} from 'lucide-react'
import { WholesalerForCreation } from './types'

interface WholesalerCardProps {
  wholesaler: WholesalerForCreation
  onClick: () => void
}

export function WholesalerCard({ wholesaler, onClick }: WholesalerCardProps) {
  return (
    <Card 
      className="bg-white/10 backdrop-blur border-white/20 p-4 cursor-pointer transition-all hover:bg-white/15 hover:border-white/30 hover:scale-[1.02]"
      onClick={onClick}
    >
      <div className="space-y-3">
        <div className="flex items-start space-x-2">
          <div className="p-2 bg-blue-500/20 rounded-lg">
            <Building2 className="h-4 w-4 text-blue-400" />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="text-white font-semibold text-sm mb-1 truncate">
              {wholesaler.name}
            </h3>
            <p className="text-white/60 text-xs mb-1 truncate">
              {wholesaler.fullName}
            </p>
            <p className="text-white/40 text-xs">
              ИНН: {wholesaler.inn}
            </p>
          </div>
        </div>

        <div className="space-y-1">
          <div className="flex items-center space-x-1">
            <MapPin className="h-3 w-3 text-gray-400" />
            <span className="text-white/80 text-xs truncate">{wholesaler.address}</span>
          </div>
          
          {wholesaler.phone && (
            <div className="flex items-center space-x-1">
              <Phone className="h-3 w-3 text-gray-400" />
              <span className="text-white/80 text-xs">{wholesaler.phone}</span>
            </div>
          )}

          {wholesaler.email && (
            <div className="flex items-center space-x-1">
              <Mail className="h-3 w-3 text-gray-400" />
              <span className="text-white/80 text-xs truncate">{wholesaler.email}</span>
            </div>
          )}
        </div>

        <div className="flex flex-wrap gap-1">
          {wholesaler.specialization.map((spec, index) => (
            <Badge key={index} className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
              {spec}
            </Badge>
          ))}
        </div>

        <div className="pt-2 border-t border-white/10 flex items-center justify-between">
          <div>
            <p className="text-white/60 text-xs">Товаров: {wholesaler.productCount}</p>
            <p className="text-white/60 text-xs">Рейтинг: {wholesaler.rating}/5</p>
          </div>
          <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
            Контрагент
          </Badge>
        </div>
      </div>
    </Card>
  )
} 