"use client";

import { projects } from "@/lib/data";
import Image from "next/image";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Github, BarChart, Presentation } from "lucide-react";

const getProjectIcon = (id: number) => {
  switch (id) {
    case 1:
      return <Presentation className="h-6 w-6 text-accent" />;
    case 2:
      return <BarChart className="h-6 w-6 text-accent" />;
    default:
      return null;
  }
};

const projectImages: { [key: number]: { src: string; alt: string, hint: string } } = {
  1: {
    src: "https://raw.githubusercontent.com/sameerbanchhor-git/assets/main/Customer%20Churn%20Prediction.png",
    alt: "Customer Churn Prediction project visual",
    hint: "churn prediction"
  },
  2: {
    src: "https://raw.githubusercontent.com/sameerbanchhor-git/assets/main/Real-Time%20Sentiment%20Analysis.jpg",
    alt: "Real-Time Sentiment Analysis project visual",
    hint: "sentiment analysis"
  },
};

export function Projects() {
  return (
    <section id="projects" className="w-full py-12 md:py-24 lg:py-32 bg-secondary">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-12">
          <h2 className="text-3xl font-headline font-bold tracking-tighter sm:text-5xl text-primary">
            My Projects
          </h2>
          <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
            Here are some of the projects I've worked on to apply and showcase
            my skills in data science.
          </p>
        </div>
        <div className="grid gap-8 md:grid-cols-1 lg:grid-cols-1">
          {projects.map((project) => (
            <Card
              key={project.id}
              className="flex flex-col overflow-hidden transition-all hover:shadow-lg"
            >
              <CardHeader className="flex flex-row items-start gap-4">
                {getProjectIcon(project.id)}
                <div>
                  <CardTitle className="font-headline text-2xl">
                    {project.title}
                  </CardTitle>
                  <CardDescription>{project.outcomes}</CardDescription>
                </div>
              </CardHeader>
              <CardContent className="grid md:grid-cols-2 gap-6 flex-grow">
                <div className="space-y-4">
                  <p className="text-foreground/80 break-words">{project.description}</p>
                  <div>
                    <h4 className="font-semibold mb-2">Methodologies:</h4>
                    <div className="flex flex-wrap gap-2">
                      {project.methodologies.map((method) => (
                        <Badge key={method} variant="secondary">
                          {method}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="flex items-center justify-center">
                  {projectImages[project.id] && (
                     <Image
                      src={projectImages[project.id].src}
                      alt={projectImages[project.id].alt}
                      data-ai-hint={projectImages[project.id].hint}
                      width={600}
                      height={400}
                      className="object-cover rounded-lg shadow-md border-2 border-accent"
                    />
                  )}
                </div>
              </CardContent>
              <CardFooter>
                <a href={project.githubUrl} target="_blank" rel="noopener noreferrer">
                  <Button variant="outline">
                    <Github className="mr-2 h-4 w-4" />
                    View on GitHub
                  </Button>
                </a>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}