"use client";

import { useCurrentUser } from "@/hooks/useCurrentUser";
import { BasicDetailsCard } from "@/components/seeker/profile/BasicDetailsCard";
import { ResumeCard } from "@/components/seeker/profile/ResumeCard";
import { KeySkillsCard } from "@/components/seeker/profile/KeySkillsCard";
import { LanguagesCard } from "@/components/seeker/profile/LanguagesCard";
import { CareerPreferenceCard } from "@/components/seeker/profile/CareerPreferenceCard";
import { WorkExperienceCard } from "@/components/seeker/profile/WorkExperienceCard";
import { EducationCard } from "@/components/seeker/profile/EducationCard";
import { CertificationCard } from "@/components/seeker/profile/CertificationCard";
import { SocialMediaLinksCard } from "@/components/seeker/profile/SocialMediaLinksCard";

export default function SeekerProfilePage() {
  const { user, isLoading } = useCurrentUser();

  if (isLoading) {
    return <div className="p-8 text-center text-gray-500">Loading your profile...</div>;
  }

  return (
    <div className="p-4 sm:p-6 lg:p-8 max-w-[1200px] mx-auto">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Profile</h1>
        <p className="text-sm text-gray-500 mt-1">This is what recruiters see when they view your profile.</p>
      </div>

      {/* Two Column Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* Left Column */}
        <div className="lg:col-span-6 flex flex-col gap-6">
          <BasicDetailsCard user={user} />
          <ResumeCard />
          <KeySkillsCard user={user} />
          <LanguagesCard user={user} />
          <CareerPreferenceCard user={user} />
        </div>

        {/* Right Column */}
        <div className="lg:col-span-6 flex flex-col gap-6">
          <WorkExperienceCard user={user} />
          <EducationCard user={user} />
          <CertificationCard user={user} />
          <SocialMediaLinksCard user={user} />
        </div>
      </div>
    </div>
  );
}