import * as React from "react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

type TimelineEntry = {
  date: string;
  items: {
    content: string;
    highlights?: { text: string; position: number }[];
  }[];
};

const timelineData: TimelineEntry[] = [
  {
    date: "۱ فروردین ۱۴۰۴",
    items: [
      {
        content:
          "راه‌اندازی <strong>تولید کد مبتنی بر هوش مصنوعی</strong> در IDE ما؛ توسعه‌دهندگان می‌توانند با دستورات زبان طبیعی کد پایه تولید کنند.",
      },
      {
        content:
          "معرفی <em>پیشنهادهای کد زمینه‌محور</em> که ساختار پروژه و الگوهای کدنویسی را درک می‌کنند تا تکمیل دقیق‌تری ارائه دهند.",
      },
      {
        content:
          "افزودن قابلیت <u>بازآرایی خودکار کد</u> که بهبودها را پیشنهاد و روی پایگاه کد موجود اعمال می‌کند.",
      },
    ],
  },
  {
    date: "۲۹ اسفند ۱۴۰۳",
    items: [
      {
        content:
          "انتشار <strong>دستیار اشکال‌زدایی مبتنی بر هوش مصنوعی</strong> که مشکلات احتمالی را شناسایی و پیش از اجرا راه‌حل پیشنهاد می‌دهد.",
      },
      {
        content:
          "پیاده‌سازی <em>تولید هوشمند مستندات</em> که به‌صورت خودکار از کامنت‌ها و ساختار کد، مستندات جامع می‌سازد.",
      },
      {
        content:
          "تقویت <u>خودکارسازی بازبینی کد</u> با تحلیل کیفیت کد و بهترین روش‌ها توسط هوش مصنوعی.",
      },
    ],
  },
  {
    date: "۲۷ اسفند ۱۴۰۳",
    items: [
      {
        content:
          "اعلام قابلیت <strong>برنامه‌نویسی دونفره با هوش مصنوعی</strong> که کمک و توضیح بلادرنگ در کدنویسی ارائه می‌دهد.",
      },
      {
        content:
          "راه‌اندازی <em>مدیریت هوشمند وابستگی‌ها</em> که نسخه‌های بهینه بسته‌ها را پیشنهاد و تعارض‌های احتمالی را شناسایی می‌کند.",
      },
      {
        content:
          "معرفی <u>تولید خودکار تست</u> که مجموعه تست جامع بر اساس عملکرد کد می‌سازد.",
      },
    ],
  },
];

interface Timeline8Props {
  className?: string;
}

const Timeline8 = ({ className }: Timeline8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-foreground lg:text-2xll">
          خط زمانی
        </h1>
        <div className="relative mx-auto max-w-4xl">
          <Separator
            orientation="vertical"
            className="absolute top-4 start-2 bg-muted"
          />
          {timelineData.map((entry, index) => (
            <div key={index} className="relative mb-10 ps-8">
              <div className="absolute top-2 start-0 flex size-5 items-center justify-center rounded-full bg-foreground">
                <div className="size-3 rounded-full bg-background" />
              </div>
              <Badge
                variant="secondary"
                className="mb-4 rounded-xl px-3 py-2 text-sm"
              >
                {entry.date}
              </Badge>

              <Card className="my-5 border-none shadow-none">
                <CardContent className="px-2">
                  <ul className="flex flex-col gap-1">
                    {entry.items.map((item, itemIndex) => (
                      <li key={itemIndex} className="flex gap-3 text-start">
                        <span className="mt-2 h-2 w-2 flex-none rounded-full bg-foreground" />
                        <span
                          className="text-md leading-relaxed text-foreground"
                          dangerouslySetInnerHTML={{ __html: item.content }}
                        />
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Timeline8 };