// Tile.tsx
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import type { IconProp } from '@fortawesome/fontawesome-svg-core'

interface TileProps {
    title: string
    icon: IconProp
    onClick: () => void
}

const Tile: React.FC<TileProps> = ({ title, icon, onClick }) => (
    <div
        onClick={onClick}
        className="card card-bordered hover:shadow-lg cursor-pointer flex flex-col items-center p-4 bg-[#9228b9]"
    >
        <FontAwesomeIcon icon={icon} size="2x" />
        <span className="mt-2 font-medium">{title}</span>
    </div>
)

export default Tile