import React from 'react';
import type { Page, Service } from '../types';

interface PricingPageProps {
  navigateTo: (page: Page) => void;
  services: Service[];
}

const PricingPage: React.FC<PricingPageProps> = ({ navigateTo, services }) => {
  return (
    <div className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-extrabold text-gray-800">সেবামূল্যের তালিকা</h1>
          <p className="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
            আমরা স্বচ্ছতায় বিশ্বাসী। প্রতিটি সেবার জন্য নির্ধারিত মূল্য এবং প্রয়োজনীয় সময় নিচে উল্লেখ করা হলো।
          </p>
        </div>

        <div className="max-w-4xl mx-auto overflow-x-auto">
          <table className="min-w-full bg-white border border-gray-200 rounded-lg shadow-md">
            <thead className="bg-green-600 text-white">
              <tr>
                <th className="text-left py-4 px-6 text-md font-semibold tracking-wider">সেবার নাম</th>
                <th className="text-left py-4 px-6 text-md font-semibold tracking-wider">সেবামূল্য</th>
                <th className="text-left py-4 px-6 text-md font-semibold tracking-wider">প্রয়োজনীয় সময়</th>
              </tr>
            </thead>
            <tbody className="text-gray-700">
              {services.map((service, index) => (
                <tr key={service.id} className={`${index % 2 === 0 ? 'bg-gray-50' : 'bg-white'} hover:bg-green-50 transition-colors duration-200`}>
                  <td className="text-left py-4 px-6 border-b border-gray-200 font-medium">{service.title}</td>
                  <td className="text-left py-4 px-6 border-b border-gray-200">{service.charge}</td>
                  <td className="text-left py-4 px-6 border-b border-gray-200">{service.time}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        <div className="text-center mt-12 p-8 bg-gray-50 rounded-lg">
             <h3 className="text-2xl font-bold text-gray-800">আপনার প্রয়োজনীয় সেবাটি এখনই গ্রহণ করুন</h3>
             <p className="mt-2 text-gray-600">বিনা দ্বিধায় আপনার আবেদন প্রক্রিয়া শুরু করুন।</p>
             <button onClick={() => navigateTo('application')} className="mt-6 bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">
              আবেদন করুন
            </button>
        </div>
      </div>
    </div>
  );
};

export default PricingPage;