import * as React from "react"

import { Toggle, ToggleField } from "@/components/ui/toggle"

export function ToggleDemo() {
  const [checked, setChecked] = React.useState(true)

  return (
    <div className="grid gap-6">
      <div className="flex flex-wrap items-center gap-4">
        <Toggle
          checked={checked}
          onCheckedChange={setChecked}
          aria-label="Toggle notifications"
        />
        <Toggle aria-label="Small toggle" size="sm" />
        <Toggle aria-label="Icon toggle" showIcon defaultChecked />
        <Toggle aria-label="Disabled toggle" disabled />
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <ToggleField
          defaultChecked
          label="Label"
          description="Supporting text"
        />
        <ToggleField
          className="w-56"
          controlPosition="end"
          label="Label"
        />
        <ToggleField
          disabled
          label="Label"
          description="Supporting text"
        />
        <ToggleField
          defaultChecked
          showIcon
          size="sm"
          label="Label"
        />
      </div>

      <div dir="rtl" className="grid gap-4 sm:grid-cols-2">
        <ToggleField
          defaultChecked
          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
          description={"\u0646\u0635 \u0645\u0633\u0627\u0639\u062f"}
        />
        <ToggleField
          className="w-56"
          controlPosition="end"
          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
        />
      </div>
    </div>
  )
}
