import React from 'react'

interface FeatureItemProps {
  imageUrl: string
  title: string
  description: string
  withLink?: boolean
  linkPath?: string
  linkText?: string
}

const FeatureItem: React.FC<FeatureItemProps> = ({
  imageUrl,
  title,
  description,
  withLink = false,
  linkPath,
  linkText,
}) => {
  return (
    <div className="sm:flex-[0_1_30%] mb-12 sm:mb-16 px-6">
      <div className="float-left mr-5 mt-1 sm:float-none sm:mr-0 sm:mt-0 sm:mb-5">
        <img
          alt="Feature"
          src={imageUrl}
          className="block w-12 h-12 sm:w-32 sm:h-32 object-contain mx-auto"
        />
      </div>

      <div className="overflow-hidden sm:text-center">
        <div className="sm:text-xl font-bold mb-1 text-gray-900 dark:text-white">
          {title}
        </div>
        <div className="text-gray-600 dark:text-gray-200">{description}</div>
        {!!withLink && (
          <div className="mt-2">
            <a
              href={linkPath}
              className="text-sky-500 hover:text-sky-600 transition-colors"
            >
              {linkText}
            </a>
          </div>
        )}
      </div>
    </div>
  )
}

export default FeatureItem