// app/components/LineTitle.tsx
"use client";

import { ChevronRight } from "lucide-react";
import Link from "next/link";
import React from "react";

interface LineTitleProps {
  title?: string;
  linkText?: string;
  linkHref?: string;
}

const LineTitle: React.FC<LineTitleProps> = ({
  title = "TOP IN THIS MONTH",
  linkText,
  linkHref = "#",
}) => {
  return (
    <div className="flex justify-between items-center">
      <div className="flex items-center gap-4">
        {/* Vertical gradient line */}
        <span className="w-1 h-6 block bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] rounded"></span>

        {/* Title */}
        <h2 className="text-[16px] font-bold text-[rgba(255, 255, 255, 0.6)]">
          {title}
        </h2>
      </div>

      {/* Optional link */}
      {linkText && (
        <Link
          href={linkHref}
          className="flex gap-2 items-center text-white font-normal text-[18px] hover:text-[#FD521E] group"

          // className="flex gap-2 bg-[linear-gradient(89deg,#ED3A57_34.19%,#FD521E_99.12%)] bg-clip-text text-transparent font-normal text-[18px]"
        >
          {linkText}{" "}
          <ChevronRight className="w-5 h-5 text-white group-hover:text-[#FD521E]" />
        </Link>
      )}
    </div>
  );
};

export default LineTitle;