import { AppHeader } from "./AppHeader";

interface HeaderProps {
  title?: string;
  action?: string;
  showBack?: boolean;
  onBack?: () => void;
  onActionClick?: () => void;
}

const headerActionStyle = {
  backgroundImage: `
    linear-gradient(180deg, #2E1B3D 0%, #23183E 100%),
    linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%)
  `,
  backgroundOrigin: "border-box",
  backgroundClip: "padding-box, border-box",
  border: "0.5px solid transparent",
  boxShadow:
    "0 -7px 20px rgba(7, 0, 18, 0.5), 0 6px 14px rgba(5, 2, 12, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 2px 5px rgba(255, 222, 255, 0.09), inset 0 -2px 0 rgba(12, 7, 27, 0.72), inset 0 -8px 14px rgba(8, 4, 18, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 0 0 2px rgba(17, 10, 35, 0.32)",
  backdropFilter: "blur(14px)",
  WebkitBackdropFilter: "blur(14px)",
} as const;

export function Header({ showBack = false, onBack, action, onActionClick }: HeaderProps) {
  return (
    <header className="app-header relative">
      <AppHeader showBack={showBack} onBack={onBack} />
      {action === "history" && onActionClick && (
        <button
          type="button"
          onClick={onActionClick}
          className="absolute right-[64px] top-3 h-10 px-3 rounded-full text-white text-xs font-bold border-[0.5px] border-transparent z-30"
          style={headerActionStyle}
          aria-label="تاریخچه چت"
        >
          تاریخچه
        </button>
      )}
    </header>
  );
}