import { ArrowLeft } from 'lucide-react';
import { Button } from './ui/button';

const HeaderWithBackIcon = ({ title, description }: { title: string; description: string }) => {
    return (
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex items-start gap-3 sm:gap-4">
                <Button variant="destructive" size="icon" onClick={() => history.back()} className="shrink-0 bg-muted hover:bg-muted/80">
                    <ArrowLeft className="h-4 w-4" color="black" />
                </Button>
                <div>
                    <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
                    <p className="text-sm text-gray-500">{description}</p>
                </div>
            </div>
        </div>
    );
};

export default HeaderWithBackIcon;