'use client';

import { useTranslations } from '@/components/locale-provider';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface SaveBarProps {
  visible: boolean;
  saving: boolean;
  onSave: () => void;
  onDiscard: () => void;
}

export function SaveBar({ visible, saving, onSave, onDiscard }: SaveBarProps) {
  const t = useTranslations();

  return (
    <div
      aria-hidden={!visible}
      className={cn(
        'pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-4 pb-4 transition-transform duration-200',
        visible ? 'translate-y-0' : 'translate-y-full'
      )}
    >
      <div
        className={cn(
          'flex w-full max-w-3xl items-center justify-between gap-4 rounded-lg border border-border bg-card px-4 py-3 shadow-lg',
          visible && 'pointer-events-auto'
        )}
      >
        <span className="text-sm text-muted-foreground">{t('common.unsavedChanges')}</span>
        <div className="flex gap-2">
          <Button type="button" variant="ghost" onClick={onDiscard} disabled={saving}>
            {t('common.discard')}
          </Button>
          <Button type="button" onClick={onSave} disabled={saving}>
            {saving ? t('common.saving') : t('common.save')}
          </Button>
        </div>
      </div>
    </div>
  );
}
