import React, { ReactNode } from 'react';

interface SuggestionButtonProps {
  title: string;
  titleIcon?: ReactNode;
  description: string;
  madlibsPrompt: string;
  onClick: () => void;
}

const SuggestionButton: React.FC<SuggestionButtonProps> = ({
  title,
  titleIcon,
  description,
  madlibsPrompt,
  onClick,
}) => {
  return (
    <button
      onClick={onClick}
      className='hover:bg-opacity-20 flex h-[124px] w-full flex-col items-center rounded-lg bg-background-secondary px-8 py-6 font-sans font-bold text-foreground-primary hover:bg-secondary'
    >
      <div className='flex w-full items-center justify-center text-center'>
        <span className='text-md font-normal break-words'>{title}</span>
        {titleIcon && <span className='ml-2'>{titleIcon}</span>}
      </div>
      <p className='mt-2 text-center text-sm font-normal break-words text-foreground-secondary'>
        {description}
      </p>
      <p className='mt-1 text-xs break-words text-gray-400'>{madlibsPrompt}</p>
    </button>
  );
};

export default SuggestionButton;