'use client';

import { LikeTargetType, LikeType } from '@/services/editor/type';
import { IconButton } from '../ui/button';
import { useThmubObject } from '@/hooks/services/common';
import React from 'react';
import { cn } from '@/lib/utils';

type LikedIconProps = {
  objectId: string;
  objectType: LikeTargetType;
} & React.ComponentProps<typeof IconButton>;

const LikedButton = React.memo((props: LikedIconProps) => {
  const { objectId, objectType, ...iconProps } = props;
  const { thumb, handleThumb, loading } = useThmubObject({ objectId, objectType });
  const isLiked = thumb === LikeType.Liked;

  return (
    <IconButton
      variant="tertiary"
      size="small"
      {...iconProps}
      iconfont={isLiked ? 'icon-Like-fill' : 'icon-Like'}
      className={cn(iconProps?.className, isLiked && 'text-red-500')}
      onClick={() => {
        if (loading) return;
        handleThumb(isLiked ? LikeType.Canceled : LikeType.Liked);
      }}
    />
  );
});

export default LikedButton;
