import { Drawer, Button } from "@hashti/react";

import { useState } from "react";
import { Drawer, Button, TextField } from "@hashti/react";

export function RightDrawerDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="primary" onPress={() => setIsOpen(true)}>
        Inspect Architectural Spec
      </Button>

      <Drawer
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        title="Sheikh Lotfollah Mosque Dome"
        description="Structural and decorative specifications of the peacock dome."
        footer={
          <div className="flex justify-end gap-3 w-full">
            <Button variant="ghost" onPress={() => setIsOpen(false)}>
              Close
            </Button>
            <Button variant="primary" onPress={() => setIsOpen(false)}>
              Export Dossier
            </Button>
          </div>
        }
      >
        <div className="flex flex-col gap-4 text-sm text-gray-700 dark:text-gray-300">
          <p>
            Constructed between 1603 and 1619 during the reign of Shah Abbas I, the dome features a
            delicate transition from an exterior octagonal base to an elevated single-shell vault.
          </p>
          <TextField label="Restoration Lead Annotations" placeholder="Add field notes..." />
        </div>
      </Drawer>
    </>
  );
}

import { useState } from "react";
import { Drawer, Button } from "@hashti/react";

export function LeftSidebarDrawerDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onPress={() => setIsOpen(true)}>
        Open Navigation Drawer
      </Button>

      <Drawer
        placement="left"
        size="sm"
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        title="Project Navigation"
      >
        <nav className="flex flex-col gap-2 py-2">
          <a href="#overview" className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
            Overview & Telemetry
          </a>
          <a href="#masonry" className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
            Brickwork & Mortar
          </a>
          <a href="#tiling" className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
            Glazed Haft-Rangi Tiles
          </a>
          <a href="#vaults" className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800">
            Vault Calculations
          </a>
        </nav>
      </Drawer>
    </>
  );
}

import { useState } from "react";
import { Drawer, Button } from "@hashti/react";

export function BottomSheetDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onPress={() => setIsOpen(true)}>
        Open Mobile Action Sheet
      </Button>

      <Drawer
        placement="bottom"
        size="md"
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        title="Actions"
        description="Select an operation for the highlighted survey segment."
      >
        <div className="grid grid-cols-2 gap-3 py-3">
          <Button variant="secondary">Measure Acoustic Reverberation</Button>
          <Button variant="secondary">Capture 3D Photogrammetry</Button>
          <Button variant="secondary">Inspect Moisture Levels</Button>
          <Button variant="primary">Generate Structural Report</Button>
        </div>
      </Drawer>
    </>
  );
}

import { useState } from "react";
import { Drawer, Button, type DrawerSize } from "@hashti/react";

export function DrawerSizesDemo() {
  const [activeSize, setActiveSize] = useState<DrawerSize | null>(null);

  return (
    <div className="flex flex-wrap gap-2">
      {(["sm", "md", "lg", "xl", "full"] as DrawerSize[]).map((size) => (
        <Button key={size} variant="secondary" onPress={() => setActiveSize(size)}>
          Size: {size.toUpperCase()}
        </Button>
      ))}

      {activeSize && (
        <Drawer
          size={activeSize}
          isOpen={activeSize !== null}
          onOpenChange={(open) => !open && setActiveSize(null)}
          title={`Drawer Dimension: ${activeSize.toUpperCase()}`}
          description={`Sliding panel demonstrating the '${activeSize}' dimension preset.`}
        >
          <p className="text-sm">
            This drawer is styled with the <code>{activeSize}</code> size constraint.
          </p>
        </Drawer>
      )}
    </div>
  );
}

import { useState } from "react";
import { Drawer, Button } from "@hashti/react";

export function RTLDrawerDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div dir="rtl" className="font-sans">
      <Button variant="primary" onPress={() => setIsOpen(true)}>
        مشاهده جزئیات ایوان
      </Button>

      <Drawer
        dir="rtl"
        placement="end"
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        title="مشخصات معماری ایوان اصلی"
        description="بررسی مقرنس‌ها و قوس جناغی ورودی عمارت."
      >
        <p className="text-sm text-gray-700 dark:text-gray-300">
          ایوان ورودی دارای دهانه‌ای به عرض ۱۲ متر و ارتفاع ۱۸ متر می‌باشد.
        </p>
      </Drawer>
    </div>
  );
}