Inspector

"use client"

import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import {
  Inspector,
  InspectorLabel,
  InspectorRow,
  InspectorSection,
  InspectorSectionTitle,
} from "@/components/ui/inspector"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Slider } from "@/components/ui/slider"
import { Stepper, StepperButtons, StepperInput } from "@/components/ui/stepper"

const fits = { fill: "Fill", fit: "Fit", stretch: "Stretch" }

function Measure({ label, defaultValue }: { label: string; defaultValue: number }) {
  return (
    <div className="flex flex-col items-center gap-0.5">
      <Stepper size="sm" defaultValue={defaultValue} min={0}>
        <StepperInput aria-label={label} className="w-14" />
        <StepperButtons />
      </Stepper>
      <span className="text-mac-footnote text-mac-label-secondary">{label}</span>
    </div>
  )
}

export default function InspectorDemo() {
  return (
    <Inspector className="w-64 rounded-[10px] bg-mac-window shadow-[0_0_0_1px_var(--mac-grid)]">
      <InspectorSection>
        <InspectorSectionTitle>Image</InspectorSectionTitle>
        <InspectorRow>
          <InspectorLabel htmlFor="inspector-name">Name</InspectorLabel>
          <Input id="inspector-name" defaultValue="Header" className="h-5 rounded-[5px] px-1.5 text-mac-subheadline" />
        </InspectorRow>
        <InspectorRow>
          <InspectorLabel>Scale</InspectorLabel>
          <Select defaultValue="fill" items={fits}>
            <SelectTrigger size="sm" aria-label="Scale" className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {Object.entries(fits).map(([value, label]) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </InspectorRow>
      </InspectorSection>
      <InspectorSection>
        <InspectorSectionTitle>Arrange</InspectorSectionTitle>
        <InspectorRow>
          <InspectorLabel>Size</InspectorLabel>
          <div className="flex justify-between">
            <Measure label="Width" defaultValue={320} />
            <Measure label="Height" defaultValue={180} />
          </div>
        </InspectorRow>
        <InspectorRow>
          <label className="flex items-center gap-1.5">
            <Checkbox defaultChecked />
            Constrain proportions
          </label>
        </InspectorRow>
      </InspectorSection>
      <InspectorSection>
        <InspectorSectionTitle>Style</InspectorSectionTitle>
        <InspectorRow>
          <InspectorLabel>Opacity</InspectorLabel>
          <Slider defaultValue={[80]} aria-label="Opacity" />
        </InspectorRow>
        <InspectorRow>
          <label className="flex items-center gap-1.5">
            <Checkbox />
            Shadow
          </label>
        </InspectorRow>
      </InspectorSection>
    </Inspector>
  )
}