import React from 'react';
import { Clock, DollarSign, CheckCircle } from 'lucide-react';

const ServiceCard = ({ service }) => {
  return (
    <div className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 p-6 border border-gray-100">
      <div className="flex justify-between items-start mb-4">
        <h3 className="text-xl font-bold text-gray-800">{service.name}</h3>
        <span className="bg-primary-100 text-primary-700 text-sm font-semibold px-3 py-1 rounded-full">
          {service.price} RON
        </span>
      </div>
      
      <div className="space-y-3 mb-6">
        <div className="flex items-center text-gray-600">
          <Clock className="h-5 w-5 mr-2 text-primary-500" />
          <span>Durată: {service.duration} minute</span>
        </div>
        
        <div className="flex items-center text-gray-600">
          <DollarSign className="h-5 w-5 mr-2 text-green-500" />
          <span>Preț final (TVA inclus)</span>
        </div>
      </div>
      
      <ul className="space-y-2 mb-6">
        {service.features.map((feature, index) => (
          <li key={index} className="flex items-center text-gray-700">
            <CheckCircle className="h-4 w-4 mr-2 text-green-500 flex-shrink-0" />
            <span>{feature}</span>
          </li>
        ))}
      </ul>
      
      <button className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600 text-white font-semibold rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all transform hover:-translate-y-0.5">
        Programează acum
      </button>
    </div>
  );
};

export default ServiceCard;