import React from "react"

interface SelectableCardProps {
  title: string
  subtitle?: string
  selected?: boolean
  onClick: () => void
  className?: string
}

const SelectableCard: React.FC<SelectableCardProps> = ({
  title,
  selected = false,
  subtitle = "",
  onClick,
  className = "",
}) => {
  return (
    <div
      className={`cursor-pointer bg-white rounded-lg shadow-md p-6 text-center transition-all 
        hover:shadow-lg border-2 ${className} ${
        selected ? "border-blue-500" : "border-transparent"
      }`}
      onClick={onClick}
    >
      <p className="text-md font-medium">{title}</p>
      {subtitle && <p className="text-sm text-gray-600">{subtitle}</p>}
    </div>
  )
}

export default SelectableCard
