import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
import clsx from 'clsx';
import { memo } from 'react';

function UpdateMark({ className, favorite, id, onClick }) {
  const hasCallback = typeof onClick !== 'undefined';

  return (
    <button
      className="w-[24px] h-[24px] cursor-pointer"
      type="button"
      onClick={() => hasCallback && onClick(id)}
    >
      <FuseSvgIcon className={clsx('w-full h-full', className, favorite && 'text-secondary-main')}>
        heroicons-outline:heart
      </FuseSvgIcon>
    </button>
  );
}

export default memo(UpdateMark);
