import {useCallback, useMemo, useState} from "react";
import {Button} from "antd";
import {HeartFilled} from "@ant-design/icons";
import useI18NPrefix from "../hooks/useI18NPrefix";

const CollectButton = ({
  onClick,
  iconStyle,
  buttonStyle,
  children,
  checked
}) => {
  const t = useI18NPrefix('global');
  const [status,setStatus]=useState(checked||false);

  const onButtonClick=useCallback(()=>{
    setStatus(!status)
    onClick && onClick(!status)
  },[status])

  const iconColor = useMemo(()=>status?'#ffadd2':"#d9d9d9",[status])

  const text = useMemo(()=>t(status?"component.collected":"component.notCollect"),[status])

  const margeStyle= {
    fontSize: 15,
    color:iconColor,
    ...iconStyle
  }

  const margeButtonStyle = {
    color:status?"":"#d9d9d9",
    ...buttonStyle
  }

  return (
    <Button type="link" onClick={onButtonClick} style={margeButtonStyle}>
      {
        children
          ? <span style={margeStyle}>{children}</span>
          : <HeartFilled style={margeStyle} />
      }
      { text }
    </Button>
  )
}

export default CollectButton;