"use client";

import { useRouter } from "next/navigation";
import { habitsDict } from "@/features/habits/dict";

export function HabitsHeader() {
  const router = useRouter();

  return (
    <header className="flex items-center justify-between px-4 py-4 sm:px-6">
      <button
        type="button"
        onClick={() => router.push("/panel")}
        aria-label={habitsDict.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">
        {habitsDict.title}
      </h1>

      <div className="size-11" />
    </header>
  );
}