import * as React from "react"
import { type LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export interface FeatureCardProps extends React.ComponentProps<typeof Card> {
  icon: LucideIcon
  title: string
  description: string
}

/**
 * FeatureCard — marketing/feature tile composed from Card.
 * The icon chip uses primary/accent vars so it re-skins per theme.
 */
export function FeatureCard({
  icon: Icon,
  title,
  description,
  className,
  ...props
}: FeatureCardProps) {
  return (
    <Card
      className={cn(
        "gap-4 transition-shadow hover:shadow-md",
        className
      )}
      {...props}
    >
      <CardHeader>
        <span className="bg-primary text-primary-foreground mb-2 flex size-11 items-center justify-center rounded-lg">
          <Icon className="size-5" />
        </span>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        <span className="text-foreground font-medium underline-offset-4 hover:underline cursor-pointer">
          Learn more →
        </span>
      </CardContent>
    </Card>
  )
}