CV Header

import { CVHeader } from "@/components/ui/cv-header";

const DemoLogo = () => (
  <svg
    className="h-10 w-auto text-white"
    viewBox="0 0 120 40"
    fill="currentColor"
  >
    <rect x="0" y="5" width="5" height="30" rx="5" />
    <text x="20" y="28" fontSize="20" fontWeight="bold">
      CAMP
    </text>
    <rect x="90" y="5" width="5" height="30" rx="5" />
  </svg>
)

export default function CVHeaderDemo() {
  return (
    <div className="flex flex-col gap-6">
      {/* Default */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-zinc-500 px-4">Default</h3>
        <CVHeader title="IT Camp for your business" />
      </div>

      {/* With Logo */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-zinc-500 px-4">With Logo</h3>
        <CVHeader
          title="IT Camp for your business"
          subtitle="Studying Course"
          logo={<DemoLogo />}
        />
      </div>

      {/* Custom Colors */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-zinc-500 px-4">Custom Colors</h3>
        <div className="space-y-4">
          <CVHeader
            title="Tech Company"
            subtitle="Engineering Excellence"
            bgColor="bg-gradient-to-r from-purple-600 to-indigo-600"
          />
          <CVHeader
            title="Green Energy Corp"
            bgColor="bg-emerald-600"
          />
          <CVHeader
            title="Creative Studio"
            subtitle="Design & Development"
            bgColor="bg-gradient-to-r from-pink-500 to-orange-500"
          />
        </div>
      </div>

      {/* Dark Theme */}
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-zinc-500 px-4">Dark</h3>
        <CVHeader
          title="Professional Resume"
          subtitle="Software Engineer"
          bgColor="bg-zinc-900"
        />
      </div>
    </div>
  )
}