'use client'

import Link from 'next/link'
import Image from 'next/image'
import { MapPin, Star, Wrench, Phone, Mail } from 'lucide-react'
import { Button } from '@/components/ui/button'

interface Craftsman {
  id: string; name: string; profession: string; city: string
  description: string; image?: string | null; coverImage?: string | null
  rating: number
  reviewCount: number; services: any[]; phone?: string | null
  email?: string | null; isAvailable: boolean
}

export function CraftsmanCard({ craftsman }: { craftsman: Craftsman }) {
  const services = Array.isArray(craftsman.services) ? craftsman.services : []

  return (
    <div className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 group">
      <div className="relative h-44">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-100 to-blue-50">
          {craftsman.coverImage || craftsman.image ? (
            <Image src={craftsman.coverImage || craftsman.image!} alt={craftsman.name} fill className="object-cover group-hover:scale-105 transition-transform duration-700 opacity-90" />
          ) : (
            <div className="w-full h-full flex items-center justify-center">
              <Wrench className="w-16 h-16 text-blue-300" />
            </div>
          )}
        </div>
        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
        {!craftsman.isAvailable && (
          <div className="absolute top-3 right-3 bg-red-500 text-white text-xs px-2 py-1 rounded-full z-10">غير متاح</div>
        )}
        <div className="absolute bottom-3 left-3 bg-white/90 backdrop-blur-sm px-2.5 py-1 rounded-full text-xs font-bold text-blue-600 flex items-center gap-1 z-10">
          <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
          {craftsman.rating.toFixed(1)} ({craftsman.reviewCount})
        </div>
        {craftsman.image && (
          <div className="absolute -bottom-0 right-4 translate-y-1/2 w-20 h-20 rounded-full border-4 border-white bg-white overflow-hidden shadow-lg z-10">
            <Image src={craftsman.image} alt={craftsman.name} width={80} height={80} className="w-full h-full object-cover" />
          </div>
        )}
      </div>
      <div className="p-5 pt-12">
        <h3 className="font-bold text-lg mb-1 group-hover:text-blue-600 transition-colors">{craftsman.name}</h3>
        <p className="text-sm text-blue-600 font-medium mb-2">{craftsman.profession}</p>
        <div className="flex items-center gap-1 text-xs text-gray-500 mb-3">
          <MapPin className="w-3 h-3" /> {craftsman.city}
        </div>
        <p className="text-sm text-gray-600 line-clamp-2 mb-4">{craftsman.description}</p>
        {services.length > 0 && (
          <div className="space-y-1.5 mb-4">
            {services.slice(0, 3).map((s: any, i: number) => (
              <div key={i} className="flex justify-between text-xs border-b border-gray-50 pb-1">
                <span className="text-gray-600">{s.name}</span>
                <span className="font-bold text-blue-600">{s.price} {s.unit || 'درهم'}</span>
              </div>
            ))}
          </div>
        )}
        <Button asChild className="w-full gap-1.5" size="sm">
          <Link href={`/craftsmen/${craftsman.id}`}>عرض التفاصيل</Link>
        </Button>
      </div>
    </div>
  )
}