import React from "react";
import ResetButtonIcon from "../../../resources/icons/resetButtonIcon";

interface ResetButtonProps {
  onReset: () => void;
  isDirty?: boolean;
}

export default function ResetButton({ onReset, isDirty }: ResetButtonProps) {
  return (
    <div
      className={`flex items-center gap-4 ${isDirty && "hover:cursor-pointer"}`}
      onClick={isDirty ? onReset : undefined}
    >
      <p
        className={`font-mono text-lg ${
          isDirty
            ? " hover:cursor-pointer text-brand-primary"
            : " hover:cursor-default text-neutral-medium-light"
        }`}
      >
        Auf Standard zurücksetzen
      </p>
      <ResetButtonIcon
        className={`h-6 w-6 ${
          isDirty ? "fill-brand-primary " : "fill-neutral-medium-light"
        } `}
      />
    </div>
  );
}