import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@/components/ui/card";

export type FeatureCardProps = {
  title: string;
  description: string;
  tags?: string[];
  icon?: React.ReactNode;
};

export function FeatureCard({
  title,
  description,
  tags = [],
  icon
}: FeatureCardProps) {
  return (
    <Card className="h-full">
      <CardHeader className="space-y-3">
        <div className="flex items-start justify-between gap-4">
          <div>
            <CardTitle className="text-lg">{title}</CardTitle>
            <CardDescription className="mt-1 text-sm">
              {description}
            </CardDescription>
          </div>
          {icon ? <div className="text-primary">{icon}</div> : null}
        </div>
      </CardHeader>
      <CardContent className="flex flex-wrap gap-2">
        {tags.map((tag) => (
          <Badge key={tag} variant="secondary">
            {tag}
          </Badge>
        ))}
      </CardContent>
    </Card>
  );
}
Combinable

Bien documentado

Entrega veloz
