'use client'

import { Building2, MapPin, Phone, Mail } from 'lucide-react'
import React from 'react'

import { Badge } from '@/components/ui/badge'
import { Card } from '@/components/ui/card'

import { SupplierForCreation } from './types'

interface SupplierCardProps {
  supplier: SupplierForCreation
  onClick: () => void
}

export function SupplierCard({ supplier, onClick }: SupplierCardProps) {
  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"
      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">{supplier.name}</h3>
            <p className="text-white/60 text-xs mb-1 truncate">{supplier.fullName}</p>
            <p className="text-white/40 text-xs">ИНН: {supplier.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">{supplier.address}</span>
          </div>

          {supplier.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">{supplier.phone}</span>
            </div>
          )}

          {supplier.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">{supplier.email}</span>
            </div>
          )}
        </div>

        <div className="flex flex-wrap gap-1">
          {supplier.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">Товаров: {supplier.productCount}</p>
            <p className="text-white/60 text-xs">Рейтинг: {supplier.rating}/5</p>
          </div>
          <Badge className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">Контрагент</Badge>
        </div>
      </div>
    </Card>
  )
}
