import * as React from "react"

import { Checkbox, CheckboxCard } from "@/components/ui/checkbox"

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

  return (
    <div className="grid gap-6">
      <div className="flex flex-wrap items-center gap-4">
        <Checkbox
          checked={checked}
          onCheckedChange={(value) => setChecked(value === true)}
          aria-label="Toggle option"
        />
        <Checkbox checked aria-label="Selected option" />
        <Checkbox aria-label="Unselected option" />
        <Checkbox disabled aria-label="Disabled option" />
      </div>

      <div className="grid gap-3">
        <CheckboxCard
          checked
          label="Label"
          description="checkbox card description"
          media={<UserLineIcon />}
        />
        <CheckboxCard
          controlPosition="start"
          label="Label"
          description="checkbox card description"
        />
        <CheckboxCard
          disabled
          label="Label"
          description="checkbox card description"
          media={<UserLineIcon />}
        />
      </div>

      <div dir="rtl" className="grid gap-3">
        <CheckboxCard
          checked
          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
          media={<UserLineIcon />}
        />
        <CheckboxCard
          controlPosition="start"
          label={"\u0627\u0644\u062a\u0633\u0645\u064a\u0629"}
          description={"\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631"}
        />
      </div>
    </div>
  )
}

function UserLineIcon() {
  return (
    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
      <path
        fill="currentColor"
        d="M4 22A8 8 0 0 1 20 22H18A6 6 0 0 0 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"
      />
    </svg>
  )
}
