Segmented

"use client";

import { Segmented } from "@waveinno/ui";
import { Columns3, LayoutGrid, List } from "lucide-react";
import * as React from "react";

export default function SegmentedDemo() {
  const [view, setView] = React.useState<"day" | "week" | "month">("week");
  const [layout, setLayout] = React.useState<"grid" | "list" | "board">("grid");
  const [plan, setPlan] = React.useState<"monthly" | "yearly">("yearly");
  const periods = [
    { value: "day" as const, label: "Day" },
    { value: "week" as const, label: "Week" },
    { value: "month" as const, label: "Month" },
  ];
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-4">
        <Segmented value={view} onChange={setView} options={periods} />
        <Segmented value={view} onChange={setView} options={periods} size="md" />
        <Segmented value={view} onChange={setView} options={periods} size="lg" variant="solid" />
      </div>
      <div className="flex flex-wrap items-center gap-4">
        <Segmented
          value={layout}
          onChange={setLayout}
          size="md"
          variant="outline"
          options={[
            { value: "grid", label: <><LayoutGrid /> Grid</> },
            { value: "list", label: <><List /> List</> },
            { value: "board", label: <><Columns3 /> Board</> },
          ]}
        />
        <div className="rounded-[14px] bg-[linear-gradient(135deg,#1437d3,#7560fd)] p-3">
          <Segmented value={plan} onChange={setPlan} size="md" variant="glass" options={[{ value: "monthly", label: "Monthly" }, { value: "yearly", label: "Yearly −20%" }]} />
        </div>
      </div>
      <div className="max-w-md">
        <Segmented value={view} onChange={setView} options={periods} size="md" variant="solid" fullWidth />
      </div>
    </div>
  );
}