"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Star, MapPin, Clock, CheckCircle, Phone } from "lucide-react"
import type { Plumber } from "@/lib/services"

interface PlumberCardProps {
  plumber: Plumber
  onSelect?: (plumber: Plumber) => void
  isSelected?: boolean
  showSelectButton?: boolean
}

export default function PlumberCard({ plumber, onSelect, isSelected, showSelectButton = true }: PlumberCardProps) {
  return (
    <Card
      className={`border-[var(--border-color)] transition-all duration-300 ${
        isSelected ? "ring-2 ring-[var(--main-color)] bg-[var(--main-color)]/5" : "hover:shadow-lg"
      }`}
    >
      <CardContent className="p-6">
        <div className="flex gap-4">
          <div className="relative">
            <Image
              src={plumber.profileImage || "/placeholder.svg"}
              alt={plumber.name}
              width={80}
              height={80}
              className="rounded-full object-cover"
            />
            {plumber.isVerified && (
              <CheckCircle className="absolute -bottom-1 -right-1 w-6 h-6 text-green-600 bg-white rounded-full" />
            )}
          </div>

          <div className="flex-1">
            <div className="flex items-start justify-between mb-2">
              <div>
                <h3 className="font-semibold text-[var(--dark-color)] mb-1">{plumber.name}</h3>
                <div className="flex items-center gap-2 mb-2">
                  <div className="flex items-center gap-1">
                    <Star className="w-4 h-4 fill-[var(--main-color)] text-[var(--main-color)]" />
                    <span className="text-sm font-medium text-[var(--dark-color)]">{plumber.rating}</span>
                  </div>
                  <span className="text-xs text-[var(--p-color)]">({plumber.reviewCount} تقييم)</span>
                  {plumber.isVerified && (
                    <Badge variant="secondary" className="text-xs bg-green-100 text-green-800">
                      معتمد
                    </Badge>
                  )}
                </div>
              </div>

              <div className="text-left">
                <span className="text-lg font-bold text-[var(--name-item)]">{plumber.pricePerHour} جنيه/ساعة</span>
              </div>
            </div>

            <div className="space-y-2 mb-3">
              <div className="flex items-center gap-2 text-sm text-[var(--parg-color)]">
                <MapPin className="w-4 h-4" />
                <span>{plumber.serviceAreas.join(", ")}</span>
              </div>

              <div className="flex items-center gap-2 text-sm text-[var(--parg-color)]">
                <Clock className="w-4 h-4" />
                <span>
                  {plumber.workingHours.start === "00:00" && plumber.workingHours.end === "23:59"
                    ? "متاح 24/7"
                    : `${plumber.workingHours.start} - ${plumber.workingHours.end}`}
                </span>
              </div>

              <div className="flex items-center gap-2 text-sm text-[var(--parg-color)]">
                <CheckCircle className="w-4 h-4" />
                <span>{plumber.completedJobs} مهمة مكتملة</span>
              </div>
            </div>

            <div className="mb-3">
              <h4 className="text-sm font-medium text-[var(--dark-color)] mb-1">التخصصات:</h4>
              <div className="flex flex-wrap gap-1">
                {plumber.specializations.map((spec, index) => (
                  <Badge key={index} variant="outline" className="text-xs">
                    {spec}
                  </Badge>
                ))}
              </div>
            </div>

            {plumber.bio && <p className="text-sm text-[var(--parg-color)] mb-3 line-clamp-2">{plumber.bio}</p>}

            {showSelectButton && (
              <div className="flex gap-2">
                <Button
                  onClick={() => onSelect?.(plumber)}
                  className={`flex-1 font-medium ${
                    isSelected
                      ? "bg-[var(--main-color)] text-[var(--dark-color)]"
                      : "bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)]"
                  }`}
                >
                  {isSelected ? "تم الاختيار" : "اختيار السباك"}
                </Button>

                <Button
                  variant="outline"
                  size="icon"
                  className="border-[var(--name-item)] text-[var(--name-item)] hover:bg-[var(--name-item)] hover:text-white bg-transparent"
                >
                  <Phone className="w-4 h-4" />
                </Button>
              </div>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}