import { ReactNode } from "react";
import { cn } from "@/lib/utils";
import { Container } from "@/components/container/components/container";

const TIMELINE_ITEMS = [
  {
    date: "2023 — Now",
    title: "Career Objective",
    description:
      "Seeking opportunities to lead complex technical initiatives where I can leverage my expertise in distributed systems and team leadership. Particularly interested in organizations solving challenges in AI/ML infrastructure or fintech scalability.",
  },
  {
    date: "2021 — 2023",
    title: "Software Architect at TechFlow Solutions",
    description:
      "Spearheaded complete redesign of core infrastructure serving 2M+ daily users. Led migration from monolith to microservices architecture, reducing deployment time from 2 hours to 15 minutes. Implemented chaos engineering practices that improved system resilience, achieving 99.99% uptime. Mentored team of 12 engineers and established engineering excellence programs.",
  },
  {
    date: "2019 — 2021",
    title: "Senior Software Engineer at DataScale Inc",
    description:
      "Led development of real-time data processing pipeline handling 500TB+ daily throughput. Architected and implemented distributed caching solution that reduced average response time by 65%. Built and maintained CI/CD pipelines using GitHub Actions and Terraform, reducing deployment failures by 80%. Introduced error budgets and SLO monitoring that improved incident response time by 45%.",
  },
  {
    date: "2018 — 2019",
    title: "Full Stack Developer at InnovateLab",
    description:
      "Developed scalable authentication system supporting OAuth2 and SAML for enterprise clients. Built real-time collaboration features using WebSocket, supporting 10,000+ concurrent users. Optimized PostgreSQL queries and implemented caching strategies, reducing average API response time from 800ms to 150ms. Created automated testing framework that increased code coverage from 45% to 85%.",
  },
  {
    date: "2017 — 2018",
    title: "Junior Developer at CodeCraft",
    description:
      "Engineered responsive front-end components using React and TypeScript, serving 100,000+ daily users. Implemented A/B testing framework that increased user engagement by 25%. Built RESTful APIs using Node.js and Express, integrating with multiple third-party services. Reduced bundle size by 60% through code splitting and lazy loading.",
  },
  {
    date: "2017",
    title: "Start of my journey",
    description:
      "Began professional development journey building full-stack applications. Created open-source npm package for data visualization that garnered 500+ stars on GitHub. Contributed to major open-source projects including React-Query and Express.js.",
  },
];

interface Timeline1Props {
  items: {
    date: string;
    title: string;
    description: ReactNode;
  }[];
  className?: string;
  wrapperClassName?: string;
}

export function Timeline1({
  items = TIMELINE_ITEMS,
  className,
  wrapperClassName,
}: Timeline1Props) {
  return (
    <Container
      className={cn(
        "@container grid gap-4 gap-y-0 relative mx-auto max-w-7xl",
        className,
      )}
      wrapperClassName={cn(wrapperClassName, "py-32")}
    >
      {items.map(({ date, title, description }, index) => {
        const lastItem = items.length - 1;
        return (
          <div
            key={title}
            className="relative grid grid-cols-[16px_1fr] gap-4 @3xl:gap-y-0 @3xl:grid-cols-[2fr_7%_7fr]"
          >
            {/* Date */}
            <div className="text-xs md:text-sm text-muted-foreground text-left @3xl:col-span-1 @3xl:text-right -mt-[5px]">
              {date}
            </div>
            {/* Decorative lines */}
            <div className="relative grid justify-center row-start-1 row-end-3 justify-items-center -ml-1 @3xl:[grid-row:unset]">
              {index !== lastItem ? (
                <div className="col-start-1 row-start-1 row-end-3 w-px bg-muted-foreground/25" />
              ) : null}
              <div
                className={cn(
                  "col-start-1 row-start-1 row-span-1 w-2 h-2 md:w-2.5 md:h-2.5 rounded-full bg-muted-foreground",
                  {
                    "bg-background border border-muted-foreground": index !== 0,
                  },
                )}
              />
            </div>
            {/* Body */}
            <div
              className={cn("grid gap-1 @3xl:gap-4", {
                "pb-16 md:pb-20": index !== lastItem,
              })}
            >
              <p className="text-sm md:text-base font-display text-foreground -mt-[8px]">
                {title}
              </p>
              <p className="text-foreground/60 text-sm leading-6 max-w-[56ch] md:leading-7 md:text-base md:max-w-[66ch]">
                {description}
              </p>
            </div>
          </div>
        );
      })}
    </Container>
  );
}
Timelines
