"use client";

import { useRouter } from "next/navigation";
import { ticketsDict } from "@/features/tickets/dict";

type TicketsHeaderProps = {
  title?: string;
  backHref?: string;
};

export function TicketsHeader({
  title = ticketsDict.title,
  backHref = "/panel/support",
}: TicketsHeaderProps) {
  const router = useRouter();

  return (
    <header className="flex items-center justify-between px-4 py-4 sm:px-6">
      <button
        type="button"
        onClick={() => router.push(backHref)}
        aria-label={ticketsDict.back}
        className="inline-flex size-11 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-soft-sm transition-transform hover:scale-105"
      >
        <svg aria-hidden="true" className="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path d="M9 6l6 6-6 6" />
        </svg>
      </button>
      <h1 className="text-xl font-bold text-[#1D2D50] dark:text-foreground sm:text-2xl">
        {title}
      </h1>
      <div className="size-11" />
    </header>
  );
}