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

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

interface Experience3Props {
  className?: string;
}

const Experience3 = ({ className }: Experience3Props) => {
  const experience = [
    {
      period: "۱۴۰۴ - تاکنون",
      title: "مهندس ارشد نرم‌افزار",
      description:
        "رهبری توسعه وب‌اپلیکیشن‌های مقیاس‌پذیر با رابط کاربری، زبان نوع‌ایمن و سرور برنامه. راهنمایی توسعه‌دهندگان تازه‌کار و پیاده‌سازی بهترین شیوه‌ها.",
      company: "گوگل",
    },
    {
      period: "۱۴۲ - ۱۴۰۴",
      title: "توسعه‌دهنده فول‌استک",
      description:
        "ساخت و نگهداری چندین وب‌سایت مشتری و پلتفرم تجارت الکترونیک. همکاری با تیم طراحی برای پیاده‌سازی رابط کاربری/تجربه کاربری دقیق.",
      company: "مایکروسافت",
    },
    {
      period: "۱۳۹۹ - ۱۴۱",
      title: "توسعه‌دهنده فرانت‌اند",
      description:
        "توسعه وب‌اپلیکیشن‌های واکنش‌گرا با فریم‌ورک‌های مدرن برنامه‌نویسی وب. بهینه‌سازی عملکرد و دسترس‌پذیری در پروژه‌های متعدد.",
      company: "اپل",
    },
    {
      period: "۱۳۹۸ - ۱۳۹۹",
      title: "توسعه‌دهنده تازه‌کار",
      description:
        "همکاری در ساخت وب‌اپلیکیشن‌ها و یادگیری شیوه‌های مدرن توسعه. مشارکت در پروژه‌های تیمی و بازبینی کد.",
      company: "نتفلیکس",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex h-fit w-fit w-full flex-col justify-between gap-10 lg:flex-row lg:items-center">
          <div className="max-w-xl">
            <p className="tracking-loose text-foreground/30">
              مسیر حرفه‌ای
            </p>
            <h1 className="mt-2 text-xl font-semibold tracking-tight lg:text-2xll">
              سابقه کاری
            </h1>
            <p className="mt-10 text-lg text-foreground/50">
              از اولین خط کد تا رهبری پروژه‌های بزرگ؛ مروری بر نقش‌ها و
              دستاوردهای حرفه‌ای در مسیر توسعه نرم‌افزار.
            </p>
          </div>
          <div className="flex w-fit max-w-lg flex-col gap-4 lg:items-center">
            <Button
              variant="secondary"
              className="group h-12 rounded-full pe-2"
            >
              دانلود رزومه
              <span className="rounded-full bg-orange-500 p-2 text-white">
                <Download className="size-4" />
              </span>
            </Button>
            <p className="text-sm text-foreground/50">
              آخرین به‌روزرسانی: ۱۴۰۴/۰۶/۱۲
            </p>
          </div>
        </div>
        <ul className="relative w-full">
          <li className="flex justify-between gap-10 border-b pt-15 pb-2 text-sm tracking-tight text-foreground/40 lg:text-base">
            <p>شرح</p>
            <p>دوره</p>
          </li>
          {experience.map((exp, index) => (
            <li
              key={index}
              className="flex justify-between gap-10 border-b py-10 lg:py-15"
            >
              <div className="max-w-2xl">
                <h3 className="mb-4 text-xl font-semibold tracking-tighter lg:text-xl lg:text-3xl">
                  (
                  {(experience.length - index).toLocaleString("fa-IR", {
                    minimumIntegerDigits: 2,
                  })}
                  ) {exp.title}
                </h3>
                <p className="text-sm text-foreground/50 lg:text-base">
                  {exp.description}
                </p>
              </div>
              <p className="w-fit min-w-20 text-start text-sm text-foreground/50 lg:text-base">
                {exp.period}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Experience3 };