import React, {ReactNode} from 'react';
import {LucideIcon} from 'lucide-react';
import IconContainer from "@/components/ui/IconContainer";

interface DetailHeroSectionProps {
    icon: LucideIcon;
    title: string;
    children?: ReactNode;
}

export default function DetailHeroSection({icon, title, children}: DetailHeroSectionProps): React.JSX.Element {
    return (
        <div
            className="p-6 bg-gradient-to-r from-primary/10 via-darkest-background to-transparent rounded-2xl border border-secondary">
            <div className="flex items-start gap-4">
                <div className="shrink-0">
                    <IconContainer icon={icon} size="lg" shape="square"/>
                </div>
                <div className="flex-1 min-w-0">
                    <h2 className="text-2xl font-bold text-text-primary">{title}</h2>
                    {children}
                </div>
            </div>
        </div>
    );
}