import { Check, Info, Minus } from "lucide-react";

import type { CompareValue } from "@/components/sections/pricing-data";
import { cn } from "@/lib/utils";

interface PricingCompareFeatureLabelProps {
  feature: string;
  tooltip?: string;
}

export function PricingCompareFeatureLabel({
  feature,
  tooltip,
}: PricingCompareFeatureLabelProps) {
  return (
    <span className="inline-flex items-center gap-1.5 text-sm text-gray-700">
      {feature}
      {tooltip ? (
        <span title={tooltip} className="inline-flex">
          <Info className="h-3.5 w-3.5 text-gray-400" aria-label={tooltip} />
        </span>
      ) : null}
    </span>
  );
}

interface PricingCompareValueCellProps {
  value: CompareValue;
  highlighted?: boolean;
}

/** Renders a compare value (✓ / – / text) without a table cell, for the mobile card view. */
export function PricingCompareValueInline({ value }: { value: CompareValue }) {
  if (value === true) return <Check className="h-4 w-4 text-blue-600" aria-hidden />;
  if (value === false) return <Minus className="h-4 w-4 text-gray-300" aria-hidden />;
  return <span className="text-sm text-gray-700">{value}</span>;
}

export function PricingCompareValueCell({
  value,
  highlighted = false,
}: PricingCompareValueCellProps) {
  return (
    <td className={cn("px-4 py-3 text-center", highlighted && "bg-blue-50/30")}>
      <span className="mx-auto inline-flex items-center justify-center">
        <PricingCompareValueInline value={value} />
      </span>
    </td>
  );
}
