import { Badge } from "@/components/ui/badge"
import { Check, X, AlertTriangle, Info } from "lucide-react"

// Define the color categories to showcase
const colorShowcase = [
  {
    name: "Grays",
    colors: ["slate", "gray", "zinc", "neutral", "stone"],
  },
  {
    name: "Reds & Pinks",
    colors: ["red", "rose", "pink"],
  },
  {
    name: "Oranges & Yellows",
    colors: ["orange", "amber", "yellow"],
  },
  {
    name: "Greens",
    colors: ["lime", "green", "emerald", "teal"],
  },
  {
    name: "Blues",
    colors: ["cyan", "sky", "blue", "indigo"],
  },
  {
    name: "Purples",
    colors: ["violet", "purple", "fuchsia"],
  },
]

// Semantic badge examples
const semanticBadges = [
  { label: "Success", color: "green", icon: Check },
  { label: "Error", color: "red", icon: X },
  { label: "Warning", color: "amber", icon: AlertTriangle },
  { label: "Info", color: "blue", icon: Info },
]

export function ColorBadgesShowcase() {
  return (
    <div className="space-y-8">
      <div>
        <h3 className="text-lg font-medium mb-4">Semantic Badges</h3>
        <div className="flex flex-wrap gap-3">
          {semanticBadges.map((badge) => (
            <Badge
              key={badge.label}
              className={`bg-${badge.color}-500 hover:bg-${badge.color}-600 flex items-center gap-1`}
            >
              <badge.icon className="h-3 w-3" />
              <span>{badge.label}</span>
            </Badge>
          ))}
        </div>
      </div>

      <div>
        <h3 className="text-lg font-medium mb-4">Color Palette Badges</h3>
        <div className="space-y-6">
          {colorShowcase.map((category) => (
            <div key={category.name}>
              <h4 className="text-md font-medium mb-2">{category.name}</h4>
              <div className="flex flex-wrap gap-2">
                {category.colors.map((color) => (
                  <Badge key={color} className={`bg-${color}-500 hover:bg-${color}-600 capitalize`}>
                    {color}
                  </Badge>
                ))}
              </div>
              <div className="mt-2 flex flex-wrap gap-2">
                {category.colors.map((color) => (
                  <Badge
                    key={`${color}-outline`}
                    variant="outline"
                    className={`border-${color}-200 text-${color}-700 dark:text-${color}-400 capitalize`}
                  >
                    {color}
                  </Badge>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <h3 className="text-lg font-medium mb-4">Badge Variants</h3>
        <div className="space-y-4">
          {["blue", "green", "red", "purple", "amber"].map((color) => (
            <div key={color} className="space-y-2">
              <h4 className="text-sm font-medium capitalize">{color}</h4>
              <div className="flex flex-wrap gap-2">
                {[300, 400, 500, 600, 700, 800].map((shade) => (
                  <Badge key={`${color}-${shade}`} className={`bg-${color}-${shade} capitalize`}>
                    {color}-{shade}
                  </Badge>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}