import { AppHeader } from "../AppHeader";

interface ChatHeaderProps {
  onHistoryClick: () => void;
}

const historyButtonStyle = {
  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 ChatHeader({ onHistoryClick }: ChatHeaderProps) {
  return (
    <div className="flex-shrink-0 relative">
      <AppHeader />
      <div className="px-4 -mt-1 pb-1.5 flex justify-end">
        <button
          type="button"
          onClick={onHistoryClick}
          className="h-10 px-3 rounded-full text-white text-xs font-bold border-[0.5px] border-transparent"
          style={historyButtonStyle}
          aria-label="تاریخچه چت"
        >
          تاریخچه
        </button>
      </div>
    </div>
  );
}
