// app/(dashboard)/job-seeker/saved-jobs/page.tsx
"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Bookmark, Plus } from "lucide-react";
import { Button } from "@/components/ui/Button";
import JobList from "@/components/jobs/JobList";
import { Job } from "@/components/jobs/JobCard";

export default function SavedJobsPage() {
  const [savedJobs] = useState<Job[]>([
    {
      id: 1,
      title: "Senior Software Engineer",
      company: "Tech Solutions PLC",
      location: "Addis Ababa, Ethiopia",
      postedTime: "2 hours ago",
      description: "We are looking for a Senior Software Engineer to join our growing team in Addis Ababa. You will be responsible for developing high-quality software solutions and mentoring junior developers.",
      skills: ["React", "Node.js", "TypeScript", "PostgreSQL"],
      experience: "5+ years",
      jobType: "Full-time",
      deadline: "March 15, 2024",
      verified: true
    },
    {
      id: 2,
      title: "Product Manager",
      company: "Innovate Corp",
      location: "Remote",
      postedTime: "1 day ago",
      description: "Innovate Corp is seeking a Product Manager to lead our product development lifecycle. You will work closely with engineering and design teams to deliver exceptional user experiences.",
      skills: ["Product Strategy", "Agile", "User Research", "Data Analysis"],
      experience: "3+ years",
      jobType: "Full-time",
      deadline: "March 20, 2024",
      verified: false
    },
    {
      id: 3,
      title: "UX/UI Designer",
      company: "Creative Hub",
      location: "Addis Ababa (On-site)",
      postedTime: "3 days ago",
      description: "Join Creative Hub as a UX/UI Designer and help us shape the future of digital products in Ethiopia. We value creativity, user-centric design, and attention to detail.",
      skills: ["Figma", "Adobe XD", "Prototyping", "Visual Design"],
      experience: "2+ years",
      jobType: "Contractual",
      deadline: "March 10, 2024",
      verified: true
    }
  ]);

  const handleViewDetails = (jobId: number) => {
    console.log(`Viewing details for job: ${jobId}`);
    // Navigation logic would go here
  };

  return (
    <div className="max-w-5xl mx-auto space-y-10">
      {/* Header Section */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight flex items-center gap-3">
            <div className="p-2 bg-sky-100 rounded-xl">
              <Bookmark className="w-6 h-6 text-sky-600 fill-sky-600" />
            </div>
            Saved Jobs
          </h1>
          <p className="text-slate-500 font-medium mt-1">
            You have <span className="text-sky-600 font-bold">{savedJobs.length}</span> opportunities saved for review.
          </p>
        </div>
        <Button variant="primary" leftIcon={<Plus className="w-4 h-4" />}>
          Explore Jobs
        </Button>
      </div>

      {/* Main Content - Centered Single Column */}
      <main>
        <JobList jobs={savedJobs} onViewDetails={handleViewDetails} />
      </main>
    </div>
  );
}