Skill Card

import { SkillCard } from "@/components/ui/skill-card";
import * as React from "react"

const skills = [
  { name: "React", level: 4 },
  { name: "TypeScript", level: 3 },
  { name: "Node.js", level: 4 },
  { name: "Tailwind CSS", level: 5 },
  { name: "PostgreSQL", level: 3 },
  { name: "Docker", level: 2 },
]

export default function SkillCardDemo() {
  const [editableLevel, setEditableLevel] = React.useState(3)

  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Grid Layout */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Skills Grid</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {skills.map((skill) => (
            <SkillCard key={skill.name} name={skill.name} level={skill.level} />
          ))}
        </div>
      </div>

      {/* Interactive */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Interactive</h3>
        <div className="max-w-xs">
          <SkillCard
            name="Editable Skill"
            level={editableLevel}
            readOnly={false}
            onChange={setEditableLevel}
          />
          <p className="mt-2 text-sm text-zinc-500">
            Current level: {editableLevel} / 5
          </p>
        </div>
      </div>

      {/* Custom Colors */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Custom Colors</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-md">
          <SkillCard name="Design" level={4} color="#EC4899" />
          <SkillCard name="Backend" level={3} color="#10B981" />
          <SkillCard name="DevOps" level={2} color="#6366F1" />
          <SkillCard name="Mobile" level={5} color="#F97316" />
        </div>
      </div>
    </div>
  )
}