Cascader

"use client";

import { useState } from "react";
import { Cascader, type PimoluCascaderOption } from "@pimolu/react";

const regions: PimoluCascaderOption[] = [
  {
    value: "europe",
    label: "Europe",
    children: [
      {
        value: "france",
        label: "France",
        children: [
          { value: "paris", label: "Paris" },
          { value: "lyon", label: "Lyon" },
          { value: "bordeaux", label: "Bordeaux" },
        ],
      },
      {
        value: "germany",
        label: "Germany",
        children: [
          { value: "berlin", label: "Berlin" },
          { value: "munich", label: "Munich" },
        ],
      },
      {
        value: "spain",
        label: "Spain",
        children: [
          { value: "madrid", label: "Madrid" },
          { value: "barcelona", label: "Barcelona" },
        ],
      },
    ],
  },
  {
    value: "north-america",
    label: "North America",
    children: [
      {
        value: "canada",
        label: "Canada",
        children: [
          { value: "montreal", label: "Montréal" },
          { value: "toronto", label: "Toronto" },
        ],
      },
      {
        value: "united-states",
        label: "United States",
        children: [
          { value: "new-york", label: "New York" },
          { value: "san-francisco", label: "San Francisco" },
        ],
      },
    ],
  },
  {
    value: "asia",
    label: "Asia",
    children: [
      {
        value: "japan",
        label: "Japan",
        children: [
          { value: "tokyo", label: "Tokyo" },
          { value: "osaka", label: "Osaka" },
        ],
      },
      {
        value: "singapore",
        label: "Singapore",
        children: [
          { value: "singapore-city", label: "Singapore" },
        ],
      },
    ],
  },
];

function ShippingExample() {
  const [path, setPath] = useState<string[]>([]);
  return (
    <div className="grid gap-5 min-w-0">
      <Cascader
        label="Shipping destination"
        placeholder="Country, then city"
        options={regions}
        value={path}
        onChange={(nextPath) => setPath(nextPath)}
        fullWidth
      />
      <p className="max-w-prose leading-relaxed">
        {
          path.length === 0
            ? "Choose a region to estimate the delivery window."
            : `Delivery to ${path
              .slice(-1)
              .join("")} is estimated at 2–4 business days.`
        }
      </p>
    </div>
  );
}

export function DemoExample() {
  return (<ShippingExample />);
}