import { cn } from "@/lib/utils";

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

interface Experience5Props {
  title?: string;
  experience?: ExperienceItem[];
  className?: string;
}

const Experience5 = ({
  title = "مسیر حرفه‌ای",
  experience = [
    {
      title: "مهندس ارشد پلتفرم فروش",
      details: "تمام‌وقت · دورکاری · تهران",
      period: "۱۴۱ - تاکنون",
      company: "Anthropic",
      logo: "/block-media/shadcnblocks/block/logos/claude-icon.svg",
      description:
        "رهبری توسعه پلتفرم CRM مقیاس‌پذیر؛ اتوماسیون فروش و داشبورد زنده برای تیم‌های سازمانی.",
    },
    {
      title: "مهندس تجربه محصول",
      details: "تمام‌وقت · حضوری · اصفهان",
      period: "۱۳۹۸ - ۱۴۰۰",
      company: "Vercel",
      logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
      description:
        "توسعه اپلیکیشن‌های توسعه کامل با برنامه‌نویسی وب، Python و MySQL. مشارکت در فرایند چابک و بازبینی کد. همکاری در پروژه‌های متن‌باز و ابزارهای داخلی.",
    },
    {
      title: "مهندس تازه‌کار محصول",
      details: "تمام‌وقت · حضوری · شیراز",
      period: "۱۳۹۷ - ۱۳۹۸",
      company: "Figma",
      logo: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      description:
        "ساخت وب‌سایت‌های واکنش‌گرا با استاندارد وب، استایل‌دهی و برنامه‌نویسی وب. کار با WordPress و PHP برای مدیریت محتوا. کمک در دیباگ و تست وب‌اپلیکیشن‌ها.",
    },
  ],
  className,
}: Experience5Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-16 md:py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-7xl">
          <h2 className="mb-12 font-serif text-xl leading-tight font-medium md:text-2xll">
            {title}
          </h2>

          <div className="space-y-8">
            {experience.map(
              ({ title, details, period, company, logo, description }, idx) => (
                <div
                  key={idx}
                  className="border-b border-border pb-6 last:border-b-0"
                >
                  <div className="flex flex-col gap-4 md:flex-row md:items-start">
                    <div className="md:w-2/3">
                      <div className="mb-2 flex items-center gap-3">
                        <img
                          src={logo}
                          alt={`لوگوی ${company}`}
                          className="h-5 object-contain"
                        />
                        <h3 className="text-xl">{title}</h3>
                      </div>
                      <p className="mb-3 text-sm text-muted-foreground">
                        {details}
                      </p>
                      <p className="text-sm leading-relaxed text-muted-foreground">
                        {description}
                      </p>
                    </div>
                    <div className="text-start md:w-1/3">
                      <p className="mb-1 text-sm font-medium">{period}</p>
                      <p className="text-sm text-muted-foreground">{company}</p>
                    </div>
                  </div>
                </div>
              ),
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Experience5 };