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

import { FrostedSurface } from '../../components/tenant';

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 }) => (
        <FrostedSurface
          key={id}
          className="relative overflow-hidden rounded-3xl border border-white/20 p-6 text-slate-900 shadow-md shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-950/80"
        >
          <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/80 text-rose-500 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-200">
                <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 dark:bg-rose-500/20 dark:text-rose-200">
                  {badge}
                </span>
              )}
            </div>
            <CardTitle className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-slate-600 dark:text-slate-400">{description}</p>
          </CardContent>
        </FrostedSurface>
      ))}
    </div>
  );
}

OnboardingHighlightsGrid.displayName = 'OnboardingHighlightsGrid';