CV Skills Section

import { CVSkillsSection, type Skill } from "@/components/ui/cv-skills-section";
import * as React from "react"

const hardSkills: Skill[] = [
  { 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 },
]

const softSkills: Skill[] = [
  { name: "Communication", level: 4 },
  { name: "Teamwork", level: 5 },
  { name: "Problem Solving", level: 4 },
  { name: "Time Management", level: 3 },
]

export default function CVSkillsSectionDemo() {
  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Hard Skills */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Hard Skills (3 columns)</h3>
        <CVSkillsSection
          title="Hard Skills"
          skills={hardSkills}
          infoText="5 stars = Expert level (ideal Junior Developer)"
          columns={3}
        />
      </div>

      {/* Soft Skills */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Soft Skills (2 columns)</h3>
        <CVSkillsSection
          title="Soft Skills"
          skills={softSkills}
          columns={2}
        />
      </div>

      {/* 4 Columns */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">4 Columns Layout</h3>
        <CVSkillsSection
          title="All Skills"
          skills={[...hardSkills, ...softSkills]}
          columns={4}
        />
      </div>

      {/* Empty State */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Empty State</h3>
        <CVSkillsSection title="Skills" skills={[]} />
      </div>
    </div>
  )
}