import React from 'react';
import { ArrowRight } from 'lucide-react';

interface CategoryHeaderProps {
  subtitle?: string;
  title?: string;
  highlightText?: string;
  description?: string;
  onExploreClick?: () => void;
}

export const CategoryHeader: React.FC<CategoryHeaderProps> = ({
  subtitle = 'EXPLORE & DISCOVER',
  title = 'Discover Our',
  highlightText = 'Categories',
  description = 'Browse through our diverse product offerings. Each category is designed to cater to your unique needs and preferences. Explore now to find what suits you best!',
  onExploreClick,
}) => {
  return (
    <div className="text-center max-w-2xl mx-auto py-10 px-4 space-y-5">
      
      {/* Decorative Dash Ornament Subtitle */}
      <div className="flex items-center justify-center gap-3 text-xs sm:text-sm font-semibold tracking-widest text-[#C81E3D] uppercase">
        <span className="w-8 h-[1px] bg-[#C81E3D]" />
        <span>{subtitle}</span>
        <span className="w-8 h-[1px] bg-[#C81E3D]" />
      </div>

      {/* Main Big Headline */}
      <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold font-playfair tracking-tight text-[#1E2432] leading-tight">
        {title}{' '}
        <span className="relative inline-block text-[#C81E3D]">
          {highlightText}
          {/* Double underline decoration accent */}
          <span className="absolute left-0 right-0 -bottom-1.5 h-1 bg-[#C81E3D] rounded-full opacity-80" />
        </span>
      </h2>

      {/* Descriptive Paragraph */}
      <p className="text-slate-600 text-sm sm:text-base leading-relaxed font-sans max-w-xl mx-auto">
        {description}
      </p>

      {/* Pill Crimson CTA Button */}
      <div className="pt-2 flex justify-center">
        <button
          onClick={onExploreClick}
          className="group inline-flex items-center gap-2.5 px-7 py-3 bg-[#C81E3D] hover:bg-[#B01733] text-white font-semibold text-sm rounded-full shadow-md hover:shadow-lg shadow-rose-900/20 transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer"
        >
          <span>EXPLORE NOW</span>
          <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
        </button>
      </div>

    </div>
  );
};