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;
}

export function PricingCompareValueCell({
  value,
  highlighted = false,
}: PricingCompareValueCellProps) {
  return (
    <td
      className={cn(
        "px-4 py-3 text-center",
        highlighted && "bg-blue-50/30"
      )}
    >
      {value === true ? (
        <Check className="mx-auto h-4 w-4 text-blue-600" aria-hidden />
      ) : value === false ? (
        <Minus className="mx-auto h-4 w-4 text-gray-300" aria-hidden />
      ) : (
        <span className="text-sm text-gray-700">{value}</span>
      )}
    </td>
  );
}
