"use client";

import { Button, PageHero } from "@waveinno/ui";
import { Building2, Clock, Download, MapPin, Pencil, Users } from "lucide-react";
import * as React from "react";

export default function HeroDemo() {
  const [tab, setTab] = React.useState("overview");
  return (
    <PageHero
      crumbs={[{ label: "Facilities", href: "#" }, { label: "Dhaka", href: "#" }, { label: "Gulshan Car Park" }]}
      icon={<Building2 />}
      eyebrow="Facility · GCP"
      title="Gulshan Car Park"
      badge={{ label: "Open", tone: "success" }}
      description="Multi-storey car park on Gulshan Avenue. Gate mode runs on two lanes; monthly parkers use the left lane."
      meta={[
        { icon: MapPin, label: "Gulshan 1, Dhaka" },
        { icon: Clock, label: "24/7" },
        { icon: Users, label: "6 staff on shift" },
      ]}
      actions={
        <>
          <Button>
            <Download /> Export
          </Button>
          <Button variant="primary">
            <Pencil /> Edit facility
          </Button>
        </>
      }
      stats={[
        { label: "Occupancy", value: "82%", hint: "↑ 6% vs last week", tone: "success" },
        { label: "Revenue today", value: "৳48,250", hint: "312 sessions" },
        { label: "Avg stay", value: "2h 14m", hint: "last 7 days" },
        { label: "Open incidents", value: "2", hint: "1 gate offline", tone: "danger" },
      ]}
      tabs={[
        { id: "overview", label: "Overview" },
        { id: "sessions", label: "Sessions", count: 312 },
        { id: "rates", label: "Rates" },
        { id: "monthly", label: "Monthly parkers", count: 48 },
        { id: "staff", label: "Staff", count: 6 },
      ]}
      activeTab={tab}
      onTabChange={setTab}
    />
  );
}