"use client";

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

type EisenhowerMatrixPickerProps = {
  isImportant: boolean;
  isUrgent: boolean;
  onChange: (values: { isImportant: boolean; isUrgent: boolean }) => void;
};

const quadrants = [
  {
    isImportant: true,
    isUrgent: true,
    label: tasksDict.eisenhower.doFirst,
    className: "border-destructive/30 bg-destructive/10 text-destructive",
    activeClassName: "ring-2 ring-destructive bg-destructive/20",
  },
  {
    isImportant: true,
    isUrgent: false,
    label: tasksDict.eisenhower.schedule,
    className: "border-info/30 bg-info/10 text-info",
    activeClassName: "ring-2 ring-info bg-info/20",
  },
  {
    isImportant: false,
    isUrgent: true,
    label: tasksDict.eisenhower.delegate,
    className: "border-primary/30 bg-primary/10 text-primary",
    activeClassName: "ring-2 ring-primary bg-primary/20",
  },
  {
    isImportant: false,
    isUrgent: false,
    label: tasksDict.eisenhower.eliminate,
    className: "border-border bg-muted text-muted-foreground",
    activeClassName: "ring-2 ring-border bg-muted",
  },
] as const;

export function EisenhowerMatrixPicker({
  isImportant,
  isUrgent,
  onChange,
}: EisenhowerMatrixPickerProps) {
  return (
    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
      {quadrants.map((quadrant) => {
        const selected =
          quadrant.isImportant === isImportant &&
          quadrant.isUrgent === isUrgent;

        return (
          <button
            key={quadrant.label}
            type="button"
            aria-pressed={selected}
            onClick={() =>
              onChange({
                isImportant: quadrant.isImportant,
                isUrgent: quadrant.isUrgent,
              })
            }
            className={`rounded-2xl border px-3 py-3 text-start text-xs font-medium leading-6 transition-all sm:text-sm ${
              quadrant.className
            } ${selected ? quadrant.activeClassName : "hover:opacity-90"}`}
          >
            {quadrant.label}
          </button>
        );
      })}
    </div>
  );
}