import React, { useState } from 'react';
import ServiceCard from '../components/ServiceCard';
import type { Page, Service } from '../types';
import { LandIcon, CitizenIcon, TaxIcon } from '../components/Icons';

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

type Category = 'all' | 'ভূমি সেবা' | 'নাগরিক সেবা' | 'কর সেবা';

const ServicesPage: React.FC<ServicesPageProps> = ({ navigateTo, services }) => {
  const [activeCategory, setActiveCategory] = useState<Category>('all');

  const filteredServices = activeCategory === 'all'
    ? services
    : services.filter(service => service.category === activeCategory);

  const categories: { name: Category, label: string, icon: React.ElementType }[] = [
    { name: 'all', label: 'সকল সেবা', icon: () => <span className="text-2xl">📑</span> },
    { name: 'ভূমি সেবা', label: 'ভূমি সেবা', icon: LandIcon },
    { name: 'নাগরিক সেবা', label: 'নাগরিক সেবা', icon: CitizenIcon },
    { name: 'কর সেবা', label: 'কর সেবা', icon: TaxIcon },
  ];

  return (
    <div className="py-16 bg-gray-50">
      <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="flex flex-wrap justify-center gap-2 md:gap-4 mb-12">
          {categories.map(category => {
            const Icon = category.icon;
            return (
              <button
                key={category.name}
                onClick={() => setActiveCategory(category.name)}
                className={`flex items-center gap-2 py-3 px-6 rounded-full text-base font-semibold transition-all duration-300 ${
                  activeCategory === category.name
                    ? 'bg-green-600 text-white shadow-lg'
                    : 'bg-white text-gray-700 hover:bg-green-100 hover:text-green-800'
                }`}
              >
                <Icon className={`w-6 h-6 ${activeCategory === category.name ? 'text-white' : 'text-green-600'}`} />
                {category.label}
              </button>
            )
          })}
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {filteredServices.map(service => (
            <ServiceCard key={service.id} service={service} navigateTo={navigateTo} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default ServicesPage;