import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { FaGithub, FaLinkedin, FaFilePdf } from "react-icons/fa";
import { motion } from "framer-motion";

const projects = [
  {
    title: "Project 1",
    description: "A brief description of project 1.",
    link: "https://github.com/yourgithub/project1",
  },
  {
    title: "Project 2",
    description: "A brief description of project 2.",
    link: "https://github.com/yourgithub/project2",
  },
];

export default function Portfolio() {
  return (
    <div className="min-h-screen bg-gray-900 text-white p-8">
      <motion.div 
        initial={{ opacity: 0, y: -20 }} 
        animate={{ opacity: 1, y: 0 }} 
        transition={{ duration: 0.8 }}
        className="max-w-4xl mx-auto text-center"
      >
        <h1 className="text-4xl font-bold mb-4">Tyler Chartrand</h1>
        <p className="text-lg text-gray-400">Software Engineer | Web Developer | Tech Enthusiast</p>
        <div className="flex justify-center gap-4 mt-4">
          <Button asChild>
            <a href="https://github.com/yourgithub" target="_blank">
              <FaGithub className="mr-2" /> GitHub
            </a>
          </Button>
          <Button asChild>
            <a href="https://linkedin.com/in/yourlinkedin" target="_blank">
              <FaLinkedin className="mr-2" /> LinkedIn
            </a>
          </Button>
          <Button asChild>
            <a href="/resume.pdf" target="_blank">
              <FaFilePdf className="mr-2" /> Resume
            </a>
          </Button>
        </div>
      </motion.div>

      <div className="mt-12 grid gap-6 sm:grid-cols-2">
        {projects.map((project, index) => (
          <motion.div 
            key={index} 
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: index * 0.2 }}
          >
            <Card className="bg-gray-800 shadow-lg p-4">
              <CardContent>
                <h2 className="text-xl font-semibold">{project.title}</h2>
                <p className="text-gray-400 mt-2">{project.description}</p>
                <a 
                  href={project.link} 
                  target="_blank" 
                  className="text-blue-400 hover:underline block mt-3"
                >View Project →</a>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </div>
  );
}