"use client"

import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"

export function TooltipsSection() {
  const { selectedMaterial, getMaterialClass } = useMaterial()
  const materialClass = selectedMaterial ? getMaterialClass(selectedMaterial) : ""

  return (
    <section id="tooltips" className="scroll-mt-16">
      <h2 className="text-4xl font-bold mb-8 text-foreground">Tooltips</h2>

      <div className="space-y-6">
        <div className="space-y-4">
          <h3 className="text-xl font-medium text-foreground">Basic Tooltip</h3>
          <div className="flex flex-wrap gap-4">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" className={cn(materialClass)}>
                    Hover me
                  </Button>
                </TooltipTrigger>
                <TooltipContent className={cn("py-1 px-2", materialClass)}>
                  <p className="m-0">This is a tooltip</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="text-xl font-medium text-foreground">Tooltip Positions</h3>
          <div className="flex flex-wrap gap-4">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" className={cn(materialClass)}>
                    Top
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="top" className={cn("py-1 px-2", materialClass)}>
                  <p className="m-0">Tooltip on top</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" className={cn(materialClass)}>
                    Right
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="right" className={cn("py-1 px-2", materialClass)}>
                  <p className="m-0">Tooltip on right</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" className={cn(materialClass)}>
                    Bottom
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="bottom" className={cn("py-1 px-2", materialClass)}>
                  <p className="m-0">Tooltip on bottom</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" className={cn(materialClass)}>
                    Left
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="left" className={cn("py-1 px-2", materialClass)}>
                  <p className="m-0">Tooltip on left</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="text-xl font-medium text-foreground">With Delay</h3>
          <div className="flex flex-wrap gap-4">
            <TooltipProvider delayDuration={700}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" className={cn(materialClass)}>
                    Delayed Tooltip
                  </Button>
                </TooltipTrigger>
                <TooltipContent className={cn("py-1 px-2", materialClass)}>
                  <p className="m-0">This tooltip has a 700ms delay</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        </div>
      </div>
    </section>
  )
}