import React from 'react';
import { JDalign, JDbutton } from '../..';
import JDtypho, { IJDtyphoProp } from '../typho/Typho';

interface CounterProp {
  count: number;
  onCount: (flag: boolean) => any;
  target?: any;
  label?: string;
  labelProp?: IJDtyphoProp;
  maxCount: number;
  isLastRoomType?: boolean;
}

export const Counter: React.FC<CounterProp> = ({
  onCount,
  labelProp,
  count,
  label,
  maxCount,
}) => {
  return (
    <JDalign
      className="counter"
      flex={{
        vCenter: true,
      }}
    >
      {label && (
        <JDtypho weight={600} mr="large" {...labelProp}>
          {label}
        </JDtypho>
      )}
      <JDalign className="counter__inner">
        <JDbutton
          disabled={count === 0}
          thema="grey1"
          mode="flat"
          className="counter__btn"
          onClick={() => {
            onCount(false);
          }}
        >
          -
        </JDbutton>
        <JDbutton thema="grey1" mode="flat" className="counter__count">
          {count}
        </JDbutton>
        <JDbutton
          disabled={maxCount <= count}
          thema="grey1"
          mode="flat"
          className="counter__btn"
          onClick={() => {
            onCount(true);
          }}
        >
          +
        </JDbutton>
      </JDalign>
    </JDalign>
  );
};

export default Counter;
