"use client";

import { useRouter } from "next/navigation";
import { tasksDict } from "@/features/tasks/dict";

type TasksHeaderProps = {
  onOpenCalendar: () => void;
};

function CalendarIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-4"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <rect x="3" y="4" width="18" height="18" rx="3" />
      <path d="M16 2v4M8 2v4M3 10h18" />
    </svg>
  );
}

export function TasksHeader({ onOpenCalendar }: TasksHeaderProps) {
  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={tasksDict.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">
        {tasksDict.title}
      </h1>

      <button
        type="button"
        onClick={onOpenCalendar}
        aria-label={tasksDict.openCalendar}
        className="inline-flex size-11 items-center justify-center rounded-full bg-[#1D2D50] text-white shadow-soft-sm dark:bg-secondary dark:text-secondary-foreground"
      >
        <CalendarIcon />
      </button>
    </header>
  );
}