"use client";

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

type HabitLogsHeaderProps = {
  habitName?: string;
};

export function HabitLogsHeader({ habitName }: HabitLogsHeaderProps) {
  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/habits")}
        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>

      <div className="min-w-0 flex-1 px-3 text-center">
        <h1 className="truncate text-xl font-bold text-[#1D2D50] dark:text-foreground sm:text-2xl">
          {habitsDict.logsTitle}
        </h1>
        {habitName ? (
          <p className="truncate text-sm text-muted-foreground">{habitName}</p>
        ) : null}
      </div>

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