import { useState } from "react";
import { cabsData } from "../../data/cabsData";
import { filterTabs } from "../../constants/filterTabs";
import SectionHeader from "./SectionHeader";
import VehicleGrid from "./VehicleGrid";
import FilterTabs from "./FilterTabs";

const CabsSection = () => {
  const [activeTab, setActiveTab] = useState("driver-rentals");

  return (
    <section id="fleet" className="py-16 md:py-20 px-4 sm:px-6 lg:px-8 bg-section-bg">
      <div className="max-w-7xl mx-auto">
        <SectionHeader
          title="Our Fleet – Affordable to Luxury"
          subtitle="Choose from our wide range of well-maintained vehicles for local trips, outstation travel, and airport transfers across Bangalore."
        />
        <FilterTabs 
          tabs={filterTabs}
          activeTab={activeTab}
          onTabChange={setActiveTab}
        />
        <VehicleGrid vehicles={cabsData} />
      </div>
    </section>
  );
};

export default CabsSection;
