import Image from "next/image";
import {
    Typography,
    Card,
    CardBody,
} from "@material-tailwind/react";


interface FeatureCardProps {
    image: string;
    title: string;
    children: React.ReactNode;
}

export function FeatureCard({ image, title, children }: FeatureCardProps) {
    return (
        <Card color="transparent" shadow={false}>
            <CardBody className="grid justify-start">
                <div className="mb-4 grid h-14 w-14 place-content-center rounded-lg p-1.5 text-left" style={{ backgroundColor: '#001227' }}>
                    <Image
                        src={image}
                        alt={title}
                        width={44}
                        height={44}
                        className="h-11 w-11 object-contain"
                    />
                </div>
                <Typography variant="h5" className="mb-2" style={{ color: '#001227' }}>
                    {title}
                </Typography>
                <Typography className="font-normal" style={{ color: 'rgba(0, 18, 39, 0.65)' }}>
                    {children}
                </Typography>
            </CardBody>
        </Card>
    );
}

export default FeatureCard;