import { Download } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface ExperienceItem {
  period: string;
  title: string;
  description: string;
  company: string;
  logo: string;
}

interface Experience1Props {
  heading?: string;
  buttonText?: string;
  buttonUrl?: string;
  experience?: ExperienceItem[];
  className?: string;
}

const Experience1 = ({
  heading = "سابقه کاری",
  buttonText = "دانلود رزومه",
  buttonUrl = "#",
  experience = [
    {
      period: "۱۴۰۴ - تاکنون",
      title: "مهندس ارشد نرم‌افزار",
      description:
        "رهبری توسعه وب‌اپلیکیشن‌های مقیاس‌پذیر با رابط کاربری، زبان نوع‌ایمن و سرور برنامه. راهنمایی توسعه‌دهندگان تازه‌کار و پیاده‌سازی بهترین شیوه‌ها.",
      company: "گوگل",
      logo: "/block-media/shadcnblocks/block/logos/google-icon.svg",
    },
    {
      period: "۱۴۲ - ۱۴۰۴",
      title: "توسعه‌دهنده فول‌استک",
      description:
        "ساخت و نگهداری چندین وب‌سایت مشتری و پلتفرم تجارت الکترونیک. همکاری با تیم طراحی برای پیاده‌سازی رابط کاربری/تجربه کاربری دقیق.",
      company: "مایکروسافت",
      logo: "/block-media/shadcnblocks/block/logos/microsoft-icon.svg",
    },
    {
      period: "۱۳۹۹ - ۱۴۱",
      title: "توسعه‌دهنده فرانت‌اند",
      description:
        "توسعه وب‌اپلیکیشن‌های واکنش‌گرا با فریم‌ورک‌های مدرن برنامه‌نویسی وب. بهینه‌سازی عملکرد و دسترس‌پذیری در پروژه‌های متعدد.",
      company: "اپل",
      logo: "/block-media/shadcnblocks/block/logos/apple-icon.svg",
    },
    {
      period: "۱۳۹۸ - ۱۳۹۹",
      title: "توسعه‌دهنده تازه‌کار",
      description:
        "همکاری در ساخت وب‌اپلیکیشن‌ها و یادگیری شیوه‌های مدرن توسعه. مشارکت در پروژه‌های تیمی و بازبینی کد.",
      company: "نتفلیکس",
      logo: "/block-media/shadcnblocks/block/logos/netflix-icon.svg",
    },
  ],
  className,
}: Experience1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container space-y-10 lg:space-y-20">
        <div className="flex w-full items-end justify-between">
          <h1 className="text-2xll font-semibold tracking-tighter lg:text-2xll">
            {heading}
          </h1>
          <Button asChild variant="ghost" size="lg" className="font-semibold">
            <a href={buttonUrl}>
              {buttonText} <Download className="size-4" />
            </a>
          </Button>
        </div>

        <ul>
          {experience.map((exp, index) => (
            <li
              key={index}
              className="flex flex-col justify-between border-b py-10 md:flex-row"
            >
              <div className="max-w-lg text-xl tracking-tighter lg:w-1/3">
                {exp.period}
              </div>
              <div className="lg:w-1/3">
                <h2 className="mb-4 text-xl font-semibold tracking-tighter">
                  {exp.title}
                </h2>
                <p className="text-foreground/50">{exp.description}</p>
              </div>
              <div className="flex items-start justify-start gap-3 text-start lg:w-1/4">
                <img
                  src={exp.logo}
                  alt={exp.company}
                  className="size-6 dark:invert"
                />
                {exp.company}
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Experience1 };