"use client"

import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Clock, Wrench } from "lucide-react"
import type { Service } from "@/lib/services"

interface ServiceCardProps {
  service: Service
}

export default function ServiceCard({ service }: ServiceCardProps) {
  return (
    <Card className="group hover:shadow-lg transition-shadow duration-300 border-[var(--border-color)]">
      <CardHeader className="p-0">
        <div className="relative overflow-hidden">
          {service.isEmergency && (
            <Badge className="absolute top-2 right-2 z-10 bg-[var(--dark-red)] text-white">طوارئ 24/7</Badge>
          )}
          <Image
            src={service.image || "/placeholder.svg"}
            alt={service.name}
            width={400}
            height={200}
            className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
          />
        </div>
      </CardHeader>

      <CardContent className="p-4">
        <h3 className="font-semibold text-[var(--dark-color)] mb-2 line-clamp-1">{service.name}</h3>

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

        <div className="flex items-center gap-4 mb-3 text-sm text-[var(--p-color)]">
          <div className="flex items-center gap-1">
            <Clock className="w-4 h-4" />
            <span>
              {Math.floor(service.duration / 60)} ساعة {service.duration % 60 > 0 && `${service.duration % 60} دقيقة`}
            </span>
          </div>
        </div>

        <div className="space-y-2 mb-4">
          <h4 className="text-sm font-medium text-[var(--dark-color)]">المزايا:</h4>
          <ul className="space-y-1">
            {service.features.slice(0, 3).map((feature, index) => (
              <li key={index} className="flex items-center gap-2 text-xs text-[var(--parg-color)]">
                <div className="w-1.5 h-1.5 bg-[var(--main-color)] rounded-full" />
                {feature}
              </li>
            ))}
          </ul>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-lg font-bold text-[var(--name-item)]">من {service.basePrice} جنيه</span>
        </div>
      </CardContent>

      <CardFooter className="p-4 pt-0">
        <Link href={`/services/book/${service.id}`} className="w-full">
          <Button className="w-full bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)] font-medium">
            <Wrench className="w-4 h-4 ml-2" />
            احجز الآن
          </Button>
        </Link>
      </CardFooter>
    </Card>
  )
}