import { Icons } from "../"

type Props = {
  title?: string,
  descText?: string,
  iconName?: string,
  iconColor?: string,
  cardClass?: string,
  titleClass?: string,
  descTextClass?: string,
  onClick?: ()=>any
}


export default function DefaultCard({
title,
descText,
iconName,
iconColor,
cardClass,
titleClass,
descTextClass,
onClick
}:Props) {
  return (
    <button 
      className={`h-full w-full rounded-lg p-5 shadow-lg hover:shadow-none bg-no-repeat bg-[90%] flex justify-between gap-4 items-center transition-all duration-300 ${cardClass && cardClass}`}
      onClick={onClick}
    >
      <div className='w-3/4'>
        <h1 className={`mb-1 text-[#FFF] text-lg text-left font-bold ${titleClass && titleClass}`}>{title}</h1>
        <p className={`text-sm text-left ${descTextClass && descTextClass}`}>{descText}</p>
      </div>

      {iconName && // DISPLAYS ICON IF THERE IS ICON NAME PRESENT
      <div className='group-hover:-translate-x-2 transition-all duration-300'>
        <Icons name={iconName} fillColor={`${iconColor ? iconColor : '#FFF'}`} />
      </div>
      }
    </button>
  )
}