import React from 'react'
import PrimaryButton from '../PrimaryButton'

export enum ModelActionType {
  Start = 'Start',
  Stop = 'Stop',
}

type ModelActionStyle = {
  title: string
  backgroundColor: string
  textColor: string
}

const modelActionMapper: Record<ModelActionType, ModelActionStyle> = {
  [ModelActionType.Start]: {
    title: 'Start',
    backgroundColor: 'bg-blue-500 hover:bg-blue-600',
    textColor: 'text-white',
  },
  [ModelActionType.Stop]: {
    title: 'Stop',
    backgroundColor: 'bg-red-500 hover:bg-red-600',
    textColor: 'text-white',
  },
}

type Props = {
  type: ModelActionType
  onActionClick: (type: ModelActionType) => void
}

const ModelActionButton: React.FC<Props> = ({ type, onActionClick }) => {
  const styles = modelActionMapper[type]
  const onClick = () => {
    onActionClick(type)
  }

  return (
    <td className="whitespace-nowrap px-6 py-4 text-sm">
      <PrimaryButton
        title={styles.title}
        onClick={onClick}
        className={styles.backgroundColor}
      />
    </td>
  )
}

export default ModelActionButton