import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type TSubmitButtonProps = {
	onClickSave: () => void;
	onClickSaveAndContinueEditing?: () => void;
	onClickDiscardChanges: () => void;
  submitText?: string;
};

const SaveWorkButton = ({
	onClickSave,
	onClickSaveAndContinueEditing,
	onClickDiscardChanges,
  submitText = "Save",
}: TSubmitButtonProps) => {
	return (
		<div className='flex justify-end gap-6 pt-10'>
			<Button
				type='button'
				onClick={onClickDiscardChanges}
				className={cn(
					"w-[253px] h-[48px] rounded-[10px] py-[10px] px-8 border-2 border-[#FF66A0] bg-white hover:bg-white items-center cursor-pointer",
					"font-medium text-[18px] text-[#B13D69] leading-[140%] align-middle"
				)}>
				Discard Changes
			</Button>
			{onClickSaveAndContinueEditing && <Button
				className={cn(
					"w-[253px] h-[48px] rounded-[10px] py-[10px] px-8 border-2 border-[#FF66A0] bg-white hover:bg-white items-center cursor-pointer",
					"font-medium text-[18px] text-[#B13D69] leading-[140%] align-middle"
				)}
				onClick={onClickSaveAndContinueEditing}>
				Save & Continue Editing
			</Button>}
			<Button
				className={cn(
					"w-[253px] h-[48px] rounded-[10px] py-[10px] px-8 border-2 border-[#B13D69] bg-[#B13D69] hover:bg-[#B13D69] items-center cursor-pointer",
					"font-medium text-[18px] leading-[140%] align-middle"
				)}
				onClick={onClickSave}>
				{submitText}
			</Button>
		</div>
	);
};

export default SaveWorkButton;