"use client";

import { Typography } from "antd";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const { Title } = Typography;

interface TaglineProps {
  className?: string;
}

const taglines = [
  "Your One-Stop Partner for Fast, Fair & Reliable Procurement.",
  "Send RFQ Get Best Prices. Let Us Handle the Rest.",
  "Smart Procurement Made Easy — Quality Assured, Cost Optimized.",
  "From Sourcing to Delivery — We Get You the Best Deal, Every Time.",
];

export default function TaglineTransition({ className }: TaglineProps) {
  const [index, setIndex] = useState(0);
  const [fade, setFade] = useState(true);
  const [isSmallScreen, setIsSmallScreen] = useState(false);

  const router = useRouter();

  // Detect screen size
  useEffect(() => {
    const checkScreen = () => {
      setIsSmallScreen(window.innerWidth <= 1440);
    };

    checkScreen();
    window.addEventListener("resize", checkScreen);
    return () => window.removeEventListener("resize", checkScreen);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setFade(false);
      setTimeout(() => {
        setIndex((prev) => (prev + 1) % taglines.length);
        setFade(true);
      }, 800);
    }, 4000);

    return () => clearInterval(interval);
  }, []);

  // ⭐ For 1440px & below — add line breaks for taglines 1, 3, 4
  let text = taglines[index];

  if (isSmallScreen) {
    if (index === 0) {
      text = "Your One-Stop Partner for Fast, <br/> Fair & ReliableProcurement.";
    }
    if (index === 2) {
      text = "Smart Procurement Made Easy —<br/>Quality Assured, Cost Optimized.";
    }
    if (index === 3) {
      text = "From Sourcing to Delivery —<br/>We Get You the Best Deal, Every Time.";
    }
  }

  // If RFQ found → convert to button
  text = text.replace(
    /Send RFQ/g,
    `
      Send RFQ`
  );

  return (
    <Title
      level={2}
      className={`${className || ""} ${fade ? "fade-in" : "fade-out"}`}
      style={{ textAlign: "center" }}
      onClick={(e: any) => {
        if ((e.target as HTMLElement).closest(".rfq-button")) {
          router.push("/rfq");
        }
      }}
    >
      <span dangerouslySetInnerHTML={{ __html: text }} />
    </Title>
  );
}