import Image from "next/image"
import { PublicSurface } from "@/components/public-surface"

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 (
    <PublicSurface className="flex h-full flex-col items-center p-6 text-center transition-all hover:-translate-y-0.5 hover:shadow-[0_24px_60px_rgba(0,0,0,0.12)]">
      <div className="relative mb-4 w-full max-w-[200px] rounded-[1.5rem] bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.14),transparent_55%),linear-gradient(180deg,rgba(247,244,236,0.72),rgba(255,255,255,0.96))] p-4">
        <Image
          src={image}
          alt={alt}
          width={imageWidth}
          height={imageHeight}
          className="mx-auto h-auto w-auto object-contain"
        />
      </div>
      <h3 className="text-xl font-semibold mb-2">{title}</h3>
      <p className="flex-1 text-sm leading-relaxed text-muted-foreground">
        {description}
      </p>
    </PublicSurface>
  )
}