import classNames from 'classnames'
import React from 'react'
export interface FaqListItemProps {
  question: string
  onClick: () => void
  loading?: boolean
  className?: string
}

export const FaqListItem: React.FC<FaqListItemProps> = ({
  question,
  onClick,
  loading = false,
  className,
}) => {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={loading}
      style={{ backgroundColor: '#E6E5E3' }}
      className={classNames(
        'w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors focus-ring',
        {
          'hover:brightness-95 active:brightness-90': !loading,
          'opacity-50 cursor-not-allowed': loading,
        },
        className
      )}
    >
      {question}
    </button>
  )
}