import { InfoIcon, SettingsIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const supportText =
  "You may notice that we've made some updates to our look and feel."
const rtlLabel = "\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0643\u062b\u0631"
const rtlSupportText =
  "\u0642\u062f \u062a\u0644\u0627\u062d\u0638 \u0623\u0646\u0646\u0627 \u0623\u062c\u0631\u064a\u0646\u0627 \u0628\u0639\u0636 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0639\u0644\u0649 \u0634\u0643\u0644\u0646\u0627 \u0648\u0645\u0638\u0647\u0631\u0646\u0627."

export function TooltipDemo() {
  return (
    <TooltipProvider delayDuration={0}>
      <div className="grid gap-8">
        <div className="flex flex-wrap items-center gap-8">
          <Tooltip defaultOpen>
            <TooltipTrigger asChild>
              <Button size="icon" variant="secondary" aria-label="More information">
                <InfoIcon />
              </Button>
            </TooltipTrigger>
            <TooltipContent pointerPosition="top-left">
              More information
            </TooltipContent>
          </Tooltip>

          <Tooltip defaultOpen>
            <TooltipTrigger asChild>
              <Button size="icon" variant="outline" aria-label="Settings help">
                <SettingsIcon />
              </Button>
            </TooltipTrigger>
            <TooltipContent pointerPosition="bottom-center" variant="default">
              More information
            </TooltipContent>
          </Tooltip>

          <Tooltip defaultOpen>
            <TooltipTrigger asChild>
              <Button size="icon" variant="ghost-primary" aria-label="No pointer help">
                <InfoIcon />
              </Button>
            </TooltipTrigger>
            <TooltipContent pointerPosition="none" showPointer={false}>
              More information
            </TooltipContent>
          </Tooltip>
        </div>

        <div className="flex flex-wrap items-center gap-8">
          <Tooltip defaultOpen>
            <TooltipTrigger asChild>
              <Button variant="secondary">Dark large</Button>
            </TooltipTrigger>
            <TooltipContent
              pointerPosition="center-right"
              size="lg"
              supportText={supportText}
            >
              More information
            </TooltipContent>
          </Tooltip>

          <Tooltip defaultOpen>
            <TooltipTrigger asChild>
              <Button variant="outline">Default large</Button>
            </TooltipTrigger>
            <TooltipContent
              pointerPosition="top-center"
              size="lg"
              supportText={supportText}
              variant="default"
            >
              More information
            </TooltipContent>
          </Tooltip>
        </div>

        <div dir="rtl" className="flex flex-wrap items-center gap-8">
          <Tooltip defaultOpen>
            <TooltipTrigger asChild>
              <Button size="icon" variant="secondary" aria-label={rtlLabel}>
                <InfoIcon />
              </Button>
            </TooltipTrigger>
            <TooltipContent dir="rtl" pointerPosition="top-left">
              {rtlLabel}
            </TooltipContent>
          </Tooltip>

          <Tooltip defaultOpen>
            <TooltipTrigger asChild>
              <Button variant="outline">{rtlLabel}</Button>
            </TooltipTrigger>
            <TooltipContent
              dir="rtl"
              pointerPosition="top-left"
              size="lg"
              supportText={rtlSupportText}
              variant="default"
            >
              {rtlLabel}
            </TooltipContent>
          </Tooltip>
        </div>
      </div>
    </TooltipProvider>
  )
}
