"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"

export function AdaptiveButtonsSection() {
  const [buttonColor, setButtonColor] = useState("#FF8C38") // Default primary color

  // Sample button colors to demonstrate contrast
  const sampleColors = [
    { name: "Primary", color: "var(--primary)", textClass: "text-primary-foreground" },
    { name: "Light Gray", color: "#E5E5E5", textClass: "text-gray-900" },
    { name: "Dark Gray", color: "#333333", textClass: "text-white" },
    { name: "Red", color: "#E53E3E", textClass: "text-white" },
    { name: "Green", color: "#38A169", textClass: "text-white" },
    { name: "Blue", color: "#3182CE", textClass: "text-white" },
    { name: "Yellow", color: "#ECC94B", textClass: "text-gray-900" },
    { name: "Pink", color: "#D53F8C", textClass: "text-white" },
    { name: "Purple", color: "#805AD5", textClass: "text-white" },
  ]

  return (
    <section id="adaptive-buttons" className="scroll-mt-16">
      <h2 className="text-4xl font-bold mb-8 text-foreground">Adaptive Button Text</h2>

      <div className="space-y-8">
        <div className="space-y-4">
          <h3 className="text-xl font-medium text-foreground">Custom Color Button</h3>
          <div className="flex flex-wrap gap-4 items-end">
            <div className="space-y-2">
              <Label htmlFor="button-color">Button Color</Label>
              <div className="flex items-center gap-2">
                <Input
                  id="button-color"
                  type="color"
                  value={buttonColor}
                  onChange={(e) => setButtonColor(e.target.value)}
                  className="w-20 h-10 p-1"
                />
                <Input
                  type="text"
                  value={buttonColor}
                  onChange={(e) => setButtonColor(e.target.value)}
                  className="w-32"
                />
              </div>
            </div>

            <Button style={{ backgroundColor: buttonColor }}>Adaptive Text Color</Button>
          </div>
          <p className="text-sm text-muted-foreground mt-2">
            The text color automatically adjusts based on the background color to maintain readability.
          </p>
        </div>

        <div className="space-y-4">
          <h3 className="text-xl font-medium text-foreground">Color Examples</h3>
          <div className="flex flex-wrap gap-4">
            {sampleColors.map((sample) => (
              <Button
                key={sample.name}
                style={{ backgroundColor: sample.color.startsWith("var") ? undefined : sample.color }}
                className={cn(
                  sample.color.startsWith("var") ? sample.color.replace("var(", "bg-").replace(")", "") : "",
                )}
              >
                {sample.name}
              </Button>
            ))}
          </div>
        </div>

        <div className="p-4 bg-muted/30 rounded-md border">
          <h4 className="text-sm font-medium mb-2">Accessibility Note</h4>
          <p className="text-sm text-muted-foreground">
            Buttons automatically adjust their text color to maintain a contrast ratio of at least 4.5:1, meeting WCAG
            AA accessibility standards. This ensures text remains readable regardless of the button's background color.
          </p>
        </div>
      </div>
    </section>
  )
}