import { Trash } from "iconsax-react";
import { type FC } from "react";

type Props = {
  color: string;
  onRemove: () => void;
  isRemoving?: boolean;
};

const TaskDetailCoverColorBar: FC<Props> = ({ color, onRemove, isRemoving }) => {
  return (
    <div className="relative mt-4 -mx-1">
      <div className="h-10 rounded-xl" style={{ backgroundColor: color }} />
      <button
        type="button"
        onClick={onRemove}
        disabled={isRemoving}
        className="absolute bottom-1 left-2 size-7 rounded-full bg-white/80 flex items-center justify-center cursor-pointer disabled:opacity-50"
        aria-label="حذف رنگ"
      >
        <Trash size={16} color="#292D32" />
      </button>
    </div>
  );
};

export default TaskDetailCoverColorBar;
