import React from 'react';
import type { Service, Page } from '../types';
import { DocumentIcon, MoneyIcon, TimeIcon } from './Icons';

interface ServiceCardProps {
  service: Service;
  navigateTo: (page: Page) => void;
}

const ServiceCard: React.FC<ServiceCardProps> = ({ service, navigateTo }) => {
  const IconComponent = service.icon;
  
  return (
    <div className="bg-white rounded-xl shadow-lg hover:shadow-2xl transition-shadow duration-300 overflow-hidden flex flex-col h-full">
      <div className="p-6 flex-grow">
        <div className="flex items-start space-x-4">
          <div className="flex-shrink-0">
             <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center">
                <IconComponent className="w-8 h-8 text-green-600" />
            </div>
          </div>
          <div>
            <h3 className="text-xl font-bold text-gray-800">{service.title}</h3>
            <p className="text-sm text-gray-500 mt-1">{service.category}</p>
          </div>
        </div>
        <p className="text-gray-600 mt-4 text-base">{service.description}</p>
        <div className="mt-6 space-y-3 text-sm">
            <div className="flex items-center text-gray-700">
                <DocumentIcon className="w-5 h-5 mr-2 text-green-500 flex-shrink-0" />
                <span><span className="font-semibold">প্রয়োজনীয় কাগজপত্র:</span> {service.requiredDocs.join(', ')}</span>
            </div>
             <div className="flex items-center text-gray-700">
                <MoneyIcon className="w-5 h-5 mr-2 text-green-500 flex-shrink-0" />
                <span><span className="font-semibold">সেবামূল্য:</span> {service.charge}</span>
            </div>
             <div className="flex items-center text-gray-700">
                <TimeIcon className="w-5 h-5 mr-2 text-green-500 flex-shrink-0" />
                <span><span className="font-semibold">সময়সীমা:</span> {service.time}</span>
            </div>
        </div>
      </div>
       <div className="p-6 bg-gray-50 mt-auto">
        <button 
          onClick={() => navigateTo('application')}
          className="w-full bg-green-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-green-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
        >
          আবেদন করুন
        </button>
      </div>
    </div>
  );
};

export default ServiceCard;