import { LucideIcon } from 'lucide-react';

import * as React from 'react';

import { Link } from '@inertiajs/react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { trackEvent } from '@/lib/analytics';
import { FEATURES_LEARN_MORE_CLICK } from '@/lib/event-catalog';
import { cn } from '@/lib/utils';

interface FeatureCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
  learnMoreUrl?: string;
  featured?: boolean;
  className?: string;
}

export const FeatureCard = React.forwardRef<HTMLDivElement, FeatureCardProps>(
  ({ icon: Icon, title, description, learnMoreUrl, featured = false, className }, ref) => {
    return (
      <Card
        ref={ref}
        className={cn(
          'h-full transition-shadow hover:shadow-lg',
          featured && 'ring-2 ring-primary shadow-md bg-primary/5',
          className,
        )}
      >
        <CardHeader>
          <div
            className={cn(
              'mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg',
              featured ? 'bg-primary/20' : 'bg-primary/10',
            )}
          >
            <Icon
              className={cn('h-6 w-6 text-primary', featured && 'h-7 w-7')}
              aria-hidden="true"
            />
          </div>
          <CardTitle className={cn('text-xl', featured && 'text-primary')}>{title}</CardTitle>
        </CardHeader>
        <CardContent>
          <CardDescription className="text-base leading-relaxed">{description}</CardDescription>
          {learnMoreUrl && (
            <Link
              href={learnMoreUrl}
              className="mt-4 inline-block text-sm font-medium text-primary hover:underline"
              onClick={() => {
                const slug = learnMoreUrl.split('/blog/')[1] ?? learnMoreUrl;
                trackEvent(FEATURES_LEARN_MORE_CLICK, { slug });
              }}
            >
              Learn more →
            </Link>
          )}
        </CardContent>
      </Card>
    );
  },
);
FeatureCard.displayName = 'FeatureCard';