import ProfileCard from "@/components/profile-components/ProfileCard";
import type { ProfileData } from "@/components/profile-components/types";

const profile: ProfileData = {
  firstName: "John",
  lastName: "Doe",
  profilePicture: "/avatar.jpg",
};

<ProfileCard
  profile={profile}
  size="md" // "sm" | "md" | "lg"
  variant="default" // "default" | "compact" | "detailed"
  showBorder={true}
  showShadow={true}
  rounded="lg" // "none" | "sm" | "md" | "lg" | "xl" | "full"
/>

import ProfileCardWithTitle from "@/components/profile-components/ProfileCardWithTitle";

const profile: ProfileData = {
  firstName: "Jane",
  lastName: "Smith",
  profilePicture: "/avatar.jpg",
  title: "Senior Software Engineer",
  company: "Tech Company Inc.",
};

<ProfileCardWithTitle profile={profile} />

import ProfileCardWithBio from "@/components/profile-components/ProfileCardWithBio";

const profile: ProfileData = {
  firstName: "Alex",
  lastName: "Johnson",
  profilePicture: "/avatar.jpg",
  title: "Product Designer",
  bio: "Passionate about creating beautiful...",
};

<ProfileCardWithBio profile={profile} />

import ProfileCardWithSocial from "@/components/profile-components/ProfileCardWithSocial";

const profile: ProfileData = {
  firstName: "Sarah",
  lastName: "Williams",
  profilePicture: "/avatar.jpg",
  title: "Marketing Director",
  socialLinks: [
    { platform: "twitter", url: "https://twitter.com/sarah" },
    { platform: "linkedin", url: "https://linkedin.com/in/sarah" },
    { platform: "github", url: "https://github.com/sarah" },
  ],
};

<ProfileCardWithSocial profile={profile} />

import ProfileCardWithStats from "@/components/profile-components/ProfileCardWithStats";

const profile: ProfileData = {
  firstName: "Mike",
  lastName: "Chen",
  profilePicture: "/avatar.jpg",
  title: "Data Scientist",
  stats: [
    { label: "Projects", value: "42" },
    { label: "Followers", value: "1.2K" },
    { label: "Following", value: "350" },
  ],
};

<ProfileCardWithStats profile={profile} />

import ProfileCardWithContact from "@/components/profile-components/ProfileCardWithContact";

const profile: ProfileData = {
  firstName: "Lisa",
  lastName: "Anderson",
  profilePicture: "/avatar.jpg",
  title: "Business Consultant",
  email: "lisa@example.com",
  phone: "+40 123 456 789",
  location: "București, România",
  website: "https://lisaanderson.com",
};

<ProfileCardWithContact profile={profile} />

import ProfileHero from "@/components/profile-components/ProfileHero";

const profile: ProfileData = {
  firstName: "Alex",
  lastName: "Martinez",
  profilePicture: "/avatar.jpg",
  title: "Creative Director",
  company: "Design Studio",
  bio: "Passionate about creating...",
  socialLinks: [...],
};

<ProfileHero profile={profile} />

import ProfileSplit from "@/components/profile-components/ProfileSplit";

const profile: ProfileData = {
  firstName: "Chris",
  lastName: "Wilson",
  profilePicture: "/avatar.jpg",
  title: "UX Designer",
  company: "Design Agency",
  bio: "Creating intuitive...",
};

<ProfileSplit profile={profile} />

import ProfileCentered from "@/components/profile-components/ProfileCentered";

const profile: ProfileData = {
  firstName: "Ryan",
  lastName: "Garcia",
  profilePicture: "/avatar.jpg",
  title: "Software Architect",
  company: "Tech Corp",
  bio: "Building scalable systems...",
  socialLinks: [...],
};

<ProfileCentered profile={profile} />

import ProfileCardFull from "@/components/profile-components/ProfileCardFull";

const profile: ProfileData = {
  firstName: "Sophie",
  lastName: "Taylor",
  profilePicture: "/avatar.jpg",
  title: "Product Manager",
  company: "Tech Startup",
  bio: "Experienced product manager...",
  email: "sophie@example.com",
  socialLinks: [...],
  stats: [...],
  skills: [...],
};

<ProfileCardFull profile={profile} />

import ProfileCardDetailed from "@/components/profile-components/ProfileCardDetailed";

const profile: ProfileData = {
  firstName: "Tom",
  lastName: "Roberts",
  profilePicture: "/avatar.jpg",
  title: "Senior Developer",
  company: "Software Inc.",
  bio: "Experienced developer...",
  email: "tom@example.com",
  socialLinks: [...],
  stats: [...],
  skills: [...],
};

<ProfileCardDetailed profile={profile} />

import ProfileCardCompact from "@/components/profile-components/ProfileCardCompact";

const profile: ProfileData = {
  firstName: "Anna",
  lastName: "Lee",
  profilePicture: "/avatar.jpg",
  title: "Frontend Developer",
};

<ProfileCardCompact profile={profile} />

import ProfileGrid from "@/components/profile-components/ProfileGrid";
import ProfileCardWithTitle from "@/components/profile-components/ProfileCardWithTitle";

const profiles: ProfileData[] = [
  { firstName: "John", lastName: "Doe", profilePicture: "/avatar1.jpg", title: "CEO" },
  { firstName: "Jane", lastName: "Smith", profilePicture: "/avatar2.jpg", title: "CTO" },
];

<ProfileGrid
  profiles={profiles}
  columnsClass="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
  gapClass="gap-6"
  cardComponent={ProfileCardWithTitle}
/>

import ProfileList from "@/components/profile-components/ProfileList";
import ProfileCardWithTitle from "@/components/profile-components/ProfileCardWithTitle";

const profiles: ProfileData[] = [...];

<ProfileList
  profiles={profiles}
  gapClass="gap-4"
  cardComponent={ProfileCardWithTitle}
/>

import AddressCard from "@/components/profile-components/AddressCard";
import AddressCardList from "@/components/profile-components/AddressCardList";

const address: Address = {
  type: "home", // "home" | "work" | "shipping" | "billing" | "other"
  label: "Adresă de acasă",
  street: "Strada Exemplu, Nr. 123",
  city: "București",
  state: "București",
  zipCode: "010001",
  country: "România",
  isDefault: true,
};

<AddressCard address={address} />

// Sau pentru multiple adrese
<AddressCardList
  addresses={[address1, address2]}
  columnsClass="grid-cols-1 md:grid-cols-2"
  gapClass="gap-4"
/>

import AchievementsList from "@/components/profile-components/AchievementsList";
import AchievementsGrid from "@/components/profile-components/AchievementsGrid";

const achievements: Achievement[] = [
  {
    title: "Game of the Year",
    description: "Awarded for...",
    icon: "🏆",
    date: "2023-12-15",
    badge: "Gold",
  },
];

// Listă simplă
<AchievementsList achievements={achievements} variant="simple" />

// Listă detaliată
<AchievementsList achievements={achievements} variant="detailed" />

// Timeline
<AchievementsList achievements={achievements} variant="timeline" />

// Grid
<AchievementsGrid achievements={achievements} />

import SkillsList from "@/components/profile-components/SkillsList";
import SkillsGrid from "@/components/profile-components/SkillsGrid";

const skills: Skill[] = [
  { name: "React", level: 95, category: "Frontend" },
  { name: "TypeScript", level: 90, category: "Frontend" },
];

// Badge-uri
<SkillsList skills={skills} variant="badges" />

// Progress bars
<SkillsList skills={skills} variant="bars" />

// Listă
<SkillsList skills={skills} variant="list" />

// Grid
<SkillsGrid skills={skills} />

import PortfolioGrid from "@/components/profile-components/PortfolioGrid";
import PortfolioList from "@/components/profile-components/PortfolioList";

const portfolio: PortfolioItem[] = [
  {
    title: "E-commerce Platform",
    description: "Full-stack solution...",
    image: "/project.jpg",
    url: "https://example.com",
    tags: ["React", "Node.js"],
    date: "2024-01-15",
    category: "Web Development",
  },
];

<PortfolioGrid items={portfolio} />

<PortfolioList items={portfolio} />

import CVView from "@/components/profile-components/CVView";

const profile: ProfileData = {
  firstName: "Maria",
  lastName: "Popescu",
  title: "Senior Full Stack Developer",
  bio: "Experienced developer...",
  email: "maria@example.com",
  experience: [...],
  education: [...],
  skills: [...],
};

<CVView
  profile={profile}
  showExperience={true}
  showEducation={true}
  showSkills={true}
/>

import BioExtended from "@/components/profile-components/BioExtended";

const bio = "Passionate about creating...";

const sections = [
  { title: "Experiență", content: "Am lucrat cu..." },
  { title: "Filosofie", content: "Cred în..." },
];

// Simplu
<BioExtended bio={bio} variant="simple" />

// Cu secțiuni
<BioExtended bio={bio} variant="with-sections" sections={sections} />

// Timeline
<BioExtended bio={bio} variant="timeline" sections={sections} />