import { SearchLg } from '@untitledui/icons';
import { Input } from '../elements';

interface TestimonialsHeroProps {
    title?: string;
    subtitle?: string;
    label?: string;
    // Optional search props
    searchTerm?: string;
    onSearchChange?: (value: string) => void;
}

export const TestimonialsHero = ({
    title = "",
    subtitle = "",
    label = "",
    searchTerm,
    onSearchChange,
}: TestimonialsHeroProps) => {
    const headline = title;
    const subhead = subtitle;
    return (
        <section className="bg-primary py-16 md:py-24">
            <div className="mx-auto max-w-container px-4 md:px-8">
                <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
                    <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
                    <h1 className="mt-3 text-display-md font-semibold text-primary md:text-display-lg">
                        {headline}
                    </h1>
                    <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
                        {subhead}
                    </p>
                    {onSearchChange && (
                        <div className="mt-8 w-full sm:mt-12 sm:w-80">
                            <Input 
                                size="md" 
                                type="search" 
                                placeholder="Search testimonials" 
                                icon={SearchLg} 
                                wrapperClassName="sm:py-0.5"
                                value={searchTerm || ''}
                                onChange={onSearchChange}
                            />
                        </div>
                    )}
                </div>
            </div>
        </section>
    );
};


