import { cn } from "@/shared/utils";
import { Users, Calendar, Shield } from "lucide-react";

interface TrustIndicatorsProps {
  className?: string;
  variant?: "horizontal" | "compact";
}

const stats = [
  {
    icon: Calendar,
    value: "20+",
    label: "Years in Japan",
  },
  {
    icon: Users,
    value: "10,000+",
    label: "Customers Served",
  },
  {
    icon: Shield,
    value: "NTT",
    label: "Authorized Partner",
  },
];

/**
 * Trust indicators showing company credibility metrics
 */
export function TrustIndicators({ className, variant = "horizontal" }: TrustIndicatorsProps) {
  if (variant === "compact") {
    return (
      <div className={cn("flex flex-wrap items-center gap-x-6 gap-y-2", className)}>
        {stats.map((stat, idx) => (
          <div key={idx} className="flex items-center gap-2 text-sm text-muted-foreground">
            <stat.icon className="h-4 w-4 text-primary/70" />
            <span className="font-semibold text-foreground">{stat.value}</span>
            <span>{stat.label}</span>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div
      className={cn(
        "flex flex-col sm:flex-row items-start sm:items-center gap-6 sm:gap-8",
        className
      )}
    >
      {stats.map((stat, idx) => (
        <div key={idx} className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/8">
            <stat.icon className="h-5 w-5 text-primary" />
          </div>
          <div>
            <div className="text-lg font-bold text-foreground">{stat.value}</div>
            <div className="text-sm text-muted-foreground">{stat.label}</div>
          </div>
        </div>
      ))}
    </div>
  );
}
