CV Basic Info

import { CVBasicInfo } from "@/components/ui/cv-basic-info";

export default function CVBasicInfoDemo() {
  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Full Example */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Full Example (Approved)</h3>
        <CVBasicInfo
          firstName="Иван"
          middleName="Петрович"
          lastName="Иванов"
          photoUrl="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face"
          position="Junior Frontend Developer"
          approved
          approvedText="Camp Approved"
        />
      </div>

      {/* Without Approval */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Without Approval Badge</h3>
        <CVBasicInfo
          firstName="Anna"
          lastName="Smith"
          photoUrl="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face"
          position="UX Designer"
        />
      </div>

      {/* With Banner */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">With Banner</h3>
        <CVBasicInfo
          firstName="Alex"
          middleName="V."
          lastName="Johnson"
          position="Senior Developer"
          approved
          approvedText="Verified"
          banner={
            <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 text-center">
              <div className="text-2xl font-bold text-blue-600">5+</div>
              <div className="text-sm text-blue-600/80">Years Experience</div>
            </div>
          }
        />
      </div>

      {/* Minimal */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Minimal (No Photo)</h3>
        <CVBasicInfo
          firstName="John"
          lastName="Doe"
          position="Backend Developer"
        />
      </div>
    </div>
  )
}