import { ChevronRight } from 'lucide-react';

const GeneralHeader = ({ title, description, page }: { title: string; description: string; page: string }) => {
    return (
        <div className="mx-auto px-2">
            <div className="py-2">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h1 className="text-xl font-semibold text-primary sm:text-2xl">{title}</h1>
                        <p className="mt-1 text-xs text-gray-600 sm:text-sm">{description}</p>
                    </div>
                    <div className="hidden items-center space-x-2 text-sm text-gray-500 sm:flex">
                        <span>{page}</span>
                        <ChevronRight className="h-4 w-4" />
                        <span className="font-medium text-primary">{title}</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default GeneralHeader;