import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

export interface HighlightItem {
  id: string;
  icon: LucideIcon;
  title: string;
  description: string;
  badge?: string;
}

interface OnboardingHighlightsGridProps {
  items: HighlightItem[];
  className?: string;
}

export function OnboardingHighlightsGrid({ items, className }: OnboardingHighlightsGridProps) {
  if (!items.length) {
    return null;
  }

  return (
    <div className={cn('grid gap-4 md:grid-cols-3', className)}>
      {items.map(({ id, icon: Icon, title, description, badge }) => (
        <Card
          key={id}
          className="relative overflow-hidden rounded-3xl border border-white/70 bg-white/90 shadow-xl shadow-rose-100/40"
        >
          <CardHeader className="space-y-3">
            <div className="flex items-center justify-between">
              <span className="flex size-12 items-center justify-center rounded-full bg-rose-100 text-rose-500 shadow-inner">
                <Icon className="size-6" />
              </span>
              {badge && (
                <span className="rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-rose-500">
                  {badge}
                </span>
              )}
            </div>
            <CardTitle className="text-lg font-semibold text-slate-900">{title}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-slate-600">{description}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

OnboardingHighlightsGrid.displayName = 'OnboardingHighlightsGrid';