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

interface Feature {
  image: string;
  title: string;
  description: string;
}

interface Timeline3Props {
  className?: string;
  heading: string;
  description: string;
  buttons: {
    primary: {
      text: string;
      url: string;
    };
    secondary: {
      text: string;
      url: string;
    };
  };
  features?: Feature[];
}

const Timeline3 = ({
  className,
  heading = "تفاوت را با ما تجربه کنید",
  description = "ما به ایجاد مشارکت‌های پایدار با مشتریانمان باور داریم و بر موفقیت بلندمدت از طریق نوآوری مشترک و پشتیبانی متعهد تمرکز می‌کنیم.",
  buttons = {
    primary: {
      text: "همین حالا شروع کنید",
      url: "#",
    },
    secondary: {
      text: "رزرو دمو",
      url: "#",
    },
  },
  features = [
    {
      image:
        "/block-media/shadcnblocks/block/placeholder-4.svg",
      title: "گسترش بین‌المللی",
      description:
        "فعالیت‌ها را به ۵ کشور جدید گسترش دادیم و به میلیون‌ها کاربر تازه دست یافتیم.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/placeholder-5.svg",
      title: "جذب سرمایه سری B",
      description:
        "۵۰ میلیون دلار سرمایه سری B برای تسریع توسعه محصول جذب کردیم.",
    },
    {
      image:
        "/block-media/shadcnblocks/block/placeholder-5.svg",
      title: "راه‌اندازی محصول",
      description:
        "محصول اصلی خود را با موفقیت به بازار عرضه کردیم." ,
    },
    {
      image:
        "/block-media/shadcnblocks/block/placeholder-5.svg",
      title: "تأسیس شرکت",
      description:
        "با چشم‌اندازی برای تحول در صنعت آغاز به کار کردیم.",
    },
  ],
}: Timeline3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-6xl">
        <div className="relative grid gap-16 md:grid-cols-2">
          <div className="top-40 h-fit text-start md:sticky">
            <h2 className="mt-4 mb-6 text-xl font-semibold md:text-2xll">
              {heading}
            </h2>
            <p className="font-medium text-muted-foreground md:text-xl">
              {description}
            </p>
            <div className="mt-8 flex flex-col gap-4 lg:flex-row">
              <Button className="gap-2" size="lg" asChild>
                <a href={buttons.primary.url}>{buttons.primary.text}</a>
              </Button>
              <Button variant="outline" size="lg" className="gap-2" asChild>
                <a href={buttons.secondary.url}>{buttons.secondary.text}</a>
              </Button>
            </div>
          </div>
          <div className="flex flex-col gap-12 md:gap-20">
            {features.map((feature, index) => (
              <div key={index} className="rounded-xl border p-2">
                <img
                  src={feature.image}
                  alt={feature.title}
                  className="aspect-video w-full rounded-xl border border-dashed object-cover"
                />
                <div className="p-6 text-start">
                  <h3 className="mb-1 text-xl font-semibold">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground">{feature.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Timeline3 };