import Image from "next/image";
import { FileText, Github, Mail, Linkedin } from "lucide-react";

const Hero = () => {
  const socialLinks = [
    { title: "My CV", href: "/cv.pdf", icon: <FileText /> },
    {
      title: "GitHub",
      href: "https://github.com/GKaszewski",
      icon: <Github />,
    },
    {
      title: "My email",
      href: "mailto:gabrielkaszewski@gmail.com",
      icon: <Mail />,
    },
    {
      title: "LinkedIn",
      href: "https://www.linkedin.com/in/gabriel-kaszewski-5344b3183",
      icon: <Linkedin />,
    },
  ];

  return (
    <div className="w-full">
      <div className="relative w-full h-screen">
        <Image
          src="/images/hero.avif"
          alt="Background"
          fill
          priority
          className="hidden object-cover pointer-events-none md:block"
        />
        <div className="flex flex-col items-center justify-center md:justify-start w-full h-full md:inset-0 md:absolute md:items-start md:p-16 lg:p-20">
          <div className="text-center md:text-left">
            <h1 className="mb-4 text-4xl font-bold tracking-tight text-white md:text-6xl">
              Gabriel Kaszewski
            </h1>
            <h2 className="text-xl font-light tracking-tight text-white md:text-2xl">
              Full-Stack Developer
            </h2>
          </div>
          <div className="flex items-center gap-4 mt-4">
            {socialLinks.map((link) => (
              <a
                key={link.title}
                href={link.href}
                title={link.title}
                target="_blank"
                rel="noopener noreferrer"
                className="text-white hover:text-yellow-400"
              >
                {link.icon}
              </a>
            ))}
          </div>
          <div className="absolute bottom-0 hidden py-2 text-sm md:block">
            <p>Photo by me Łazy, 2018 (compressed)</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;