import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"

interface FeatureCardProps {
  image: string
  alt: string
  title: string
  description: string
  imageWidth?: number
  imageHeight?: number
}

export function FeatureCard({
  image,
  alt,
  title,
  description,
  imageWidth = 247,
  imageHeight = 300,
}: FeatureCardProps) {
  return (
    <Card className="border-border/50 overflow-hidden hover:border-secondary/50 transition-colors h-full flex flex-col">
      <CardContent className="p-6 flex flex-col items-center text-center flex-1">
        <div className="relative w-full max-w-[200px] mb-4">
          <Image
            src={image}
            alt={alt}
            width={imageWidth}
            height={imageHeight}
            className="rounded-lg shadow-lg w-auto h-auto object-contain"
          />
        </div>
        <h3 className="text-xl font-semibold mb-2">{title}</h3>
        <p className="text-sm text-muted-foreground leading-relaxed flex-1">
          {description}
        </p>
      </CardContent>
    </Card>
  )
}


