import * as React from 'react';
import { Reveal } from '../Reveal';

interface HeroItemProps {
  number: string;
  title: string;
  description: string;
  delay?: number;
}

export const HeroItem: React.FC<HeroItemProps> = ({ number, title, description, delay = 0 }) => {
  return (
    <Reveal delay={delay}>
      <div className="group flex gap-6 md:gap-8 p-6 md:p-8 border border-transparent hover:border-slate-100 rounded-2xl transition-all duration-500 hover:bg-slate-50/50 relative overflow-hidden">
        {/* Animated Bottom Line */}
        <div className="absolute bottom-0 left-8 right-8 h-px bg-slate-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left"></div>
        
        <div className="absolute inset-0 bg-gradient-to-r from-slate-50/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        <span className="text-xs font-bold uppercase tracking-[0.2em] text-slate-300 group-hover:text-slate-900 transition-colors pt-1.5 relative z-10">
          {number}
        </span>
        <div className="space-y-2 relative z-10">
          <h3 className="text-2xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:tracking-tighter transition-all duration-500">
            {title}
          </h3>
          <p className="text-lg md:text-xl text-slate-400 font-serif italic leading-snug group-hover:text-slate-600 transition-colors duration-500">
            {description}
          </p>
        </div>
      </div>
    </Reveal>
  );
};