import { CheckCircle } from "lucide-react";
import { cn } from "@/shared/utils";

export interface HighlightFeature {
  icon: React.ReactNode;
  title: string;
  description: string;
  highlight?: string;
}

interface ServiceHighlightsProps {
  features: HighlightFeature[];
  className?: string;
  /** Layout variant */
  variant?: "grid" | "compact";
}

function HighlightItem({ icon, title, description, highlight }: HighlightFeature) {
  return (
    <div
      className={cn(
        "flex flex-col h-full p-5 rounded-2xl",
        "cp-glass-card",
        "transition-all duration-[var(--cp-duration-normal)]",
        "hover:-translate-y-0.5 hover:shadow-lg"
      )}
    >
      <div className="flex items-start justify-between gap-4 mb-3">
        <div
          className={cn(
            "flex h-11 w-11 items-center justify-center rounded-xl flex-shrink-0",
            "bg-primary/10 text-primary",
            "transition-transform duration-[var(--cp-duration-normal)]",
            "group-hover:scale-105"
          )}
        >
          {icon}
        </div>
        {highlight && (
          <span
            className={cn(
              "inline-flex items-center gap-1.5 py-1 px-2.5 rounded-full",
              "bg-success/10 text-success",
              "text-[10px] font-bold leading-tight"
            )}
          >
            <CheckCircle className="h-3.5 w-3.5 flex-shrink-0" />
            <span className="break-words">{highlight}</span>
          </span>
        )}
      </div>

      <h3 className="font-bold text-foreground text-base mb-2">{title}</h3>
      <p className="text-sm text-muted-foreground leading-relaxed flex-grow">{description}</p>
    </div>
  );
}

function CompactHighlightItem({ icon, title, description, highlight }: HighlightFeature) {
  return (
    <div
      className={cn(
        "flex items-start gap-4 p-4 rounded-xl",
        "bg-card/50 border border-border/50",
        "transition-all duration-[var(--cp-duration-normal)]",
        "hover:bg-card hover:border-border"
      )}
    >
      <div
        className={cn(
          "flex h-10 w-10 items-center justify-center rounded-lg flex-shrink-0",
          "bg-primary/10 text-primary"
        )}
      >
        {icon}
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-1">
          <h3 className="font-semibold text-foreground text-sm">{title}</h3>
          {highlight && (
            <span className="text-[10px] font-medium text-success bg-success/10 px-2 py-0.5 rounded-full">
              {highlight}
            </span>
          )}
        </div>
        <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
      </div>
    </div>
  );
}

/**
 * ServiceHighlights
 *
 * A clean, grid-based layout for displaying service features/highlights.
 * Supports two variants: 'grid' for larger cards and 'compact' for inline style.
 */
export function ServiceHighlights({
  features,
  className = "",
  variant = "grid",
}: ServiceHighlightsProps) {
  if (variant === "compact") {
    return (
      <div className={cn("grid grid-cols-1 md:grid-cols-2 gap-3", className)}>
        {features.map((feature, index) => (
          <CompactHighlightItem key={index} {...feature} />
        ))}
      </div>
    );
  }

  return (
    <div
      className={cn(
        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 cp-stagger-children",
        className
      )}
    >
      {features.map((feature, index) => (
        <HighlightItem key={index} {...feature} />
      ))}
    </div>
  );
}
