import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router';
import { ArrowLeft, Printer, Download, X } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function ReceiptHeader() {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <header className="sticky top-0 z-10 flex h-16 items-center justify-between border-b border-border bg-card/80 px-8 backdrop-blur-md">
      <div className="flex items-center gap-3">
        <button
          className="flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-white text-slate-500 shadow-sm transition-colors hover:bg-slate-50 hover:text-slate-900"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft className="h-4 w-4" />
        </button>
        <h2 className="text-lg font-bold tracking-tight text-slate-900">
          {t('receipt.previewTitle')}
        </h2>
      </div>
      <div className="flex items-center gap-3">
        <Button variant="outline" className="gap-2 shadow-sm">
          <Printer className="h-4 w-4" />
          {t('receipt.print')}
        </Button>
        <Button className="gap-2 shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 active:scale-95 transition-all">
          <Download className="h-4 w-4" />
          {t('receipt.download')}
        </Button>
        <div className="mx-1 h-6 w-px bg-slate-200" />
        <button
          className="flex h-9 w-9 items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
          onClick={() => navigate(-1)}
        >
          <X className="h-5 w-5" />
        </button>
      </div>
    </header>
  );
}