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

interface TopBarProps {
    title: string;
    icon?: LucideIcon;
    actions?: React.ReactNode;
}

export const TopBar: React.FC<TopBarProps> = ({ title, icon: Icon, actions }) => {
    return (
        <div className="p-4 bg-surface-container shadow-elevation-1 flex items-center gap-3 z-10 shrink-0 rounded-b-[24px]">
            {Icon && (
                <div className="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center">
                    <Icon size={20} className="text-on-secondary-container" />
                </div>
            )}
            <h2 className="text-xl font-normal text-on-surface flex-1">{title}</h2>
            {actions && <div className="flex items-center gap-2">{actions}</div>}
        </div>
    );
};
