import React from 'react'
import '../tailwind.css'
import { classNames } from '../utils/css'
import { Avatar } from '../'

export interface ServiceButtonProps {
  // The title to display in the button
  title?: string
  // Disables the button, disallowing interaction
  disabled?: boolean
  // Hex background color
  backgroundColor?: string
  /** URL for the image */
  source?: string
  // Callback when clicked
  onClick?(): void
}

export const ServiceButton = ({
  title,
  disabled,
  backgroundColor,
  source,
  onClick
}: ServiceButtonProps) => {
  const styles = {
    base: 'flex w-full justify-left items-center font-semibold cursor-pointer transition-colors duration-200 rounded-lg py-4 px-4 text-base hover:opacity-90',
    primary: 'text-on-primary-text',
    fullWidth: 'w-full',
    backgroundColor: backgroundColor,
    defaultBackground: 'bg-primary'
  }

  const isDisabled = disabled

  const className = classNames(
    styles.base,
    styles.primary,
    styles.fullWidth,
    backgroundColor && styles.backgroundColor,
    !backgroundColor && styles.defaultBackground
  )

  const logoMarkup = (
    <span className="mr-4">
      <Avatar size="sm" source={source} alt={title ? title : ''} />
    </span>
  )

  const buttonMarkup = (
    <button className={className} disabled={isDisabled} onClick={onClick}>
      {source && logoMarkup}
      {title && <span>{title}</span>}
    </button>
  )

  return <>{buttonMarkup}</>
}
