import { FC } from 'react'

interface Props {
    title:string,
    onClick?(): void,
    type?:"button" | "submit" | "reset" | undefined
    style?: "primary" | "secundary" | "info"
}

export const Button:FC <Props> = ({title,onClick,type='button', style="primary"}) => {

  let className = "rounded-3xl m-2 px-4 py-2 shadow-md hover:shadow-xl uppercase";
  switch (style) {
    case "primary":
      className  = className + " bg-sky-300 hover:bg-sky-400"
    break;
    case "secundary":
      className  = className + " hover:bg-sky-200"
    break; 
    default:
      className  = className + " bg-sky-300 hover:bg-sky-400"
  }
    

 return (
   <>
    <button 
      onClick={onClick}
      type={type} 
      
      className={className}>
        {title}
      </button>
   </>
 )
}