import { IProps } from "@/common/Iprops.interface";
import * as React from 'react';
import { useMemo } from 'react';

export interface StyledButtonType extends IProps {
  text: string;
  color?: string;
  onClick?: ()=>any;
}

export default function StyledButton (props: StyledButtonType) {
  const { text, color,className,onClick } = props;
  const colorIs = color?color:'white'
  const colorStyle = useMemo(()=>{
    switch (colorIs) {
      case 'white':
        return {
          text:'#000000',
          bgColor:'#ffffff'
        }
      case 'black':
        return {
          text:'#ffffff',
          bgColor:'#000000'
        }
      case 'red':
        return {
          text:'#ffffff',
          bgColor:'#E60000'
        }
      default:
        return {
          text:'#000000',
          bgColor:'#ffffff'
        }
    }
  },[colorIs])
  return (
    <button
      className={`normal-text py-2 tracking-widest cursor-pointer rounded-full px-8 ${className?className:''}`}
      style={{
        color:colorStyle.text,
        backgroundColor:colorStyle.bgColor
      }}
      onClick={onClick}
    >
      {text}
    </button>
  );
}
