import { type FC } from "react";
import { useTranslation } from "react-i18next";
import { clx } from "../../../../../helpers/utils";
import { TASK_COVER_COLORS } from "./constants";

type Props = {
  selectedColor: string | null;
  onSelect: (color: string) => void;
};

const TaskDetailCoverColorPopover: FC<Props> = ({ selectedColor, onSelect }) => {
  const { t } = useTranslation("global");

  return (
    <div className="w-[280px]">
      <div className="text-xs font-medium mb-3 text-right">{t("taskmanager.task_detail.select_cover_color")}</div>
      <div className="grid grid-cols-4 gap-2">
        {TASK_COVER_COLORS.map((color) => (
          <button
            key={color}
            type="button"
            onClick={() => onSelect(color)}
            className={clx(
              "h-10 rounded-lg cursor-pointer transition-shadow",
              color === "#D1D5DB" && "border border-[#B0B0B0]",
              selectedColor === color && "ring-2 ring-black ring-offset-1",
            )}
            style={{ backgroundColor: color }}
            aria-label={color}
          />
        ))}
      </div>
    </div>
  );
};

export default TaskDetailCoverColorPopover;
