wulf-pulse/components/kiosk/company-tickets-card.tsx

'use client';

import { GaugeChart } from './gauge-chart';

interface CompanyTicketsStats {
  hynesCount: number;
  seubertCount: number;
  universalCount: number;
}

interface CompanyTicketsCardProps {
  stats: CompanyTicketsStats;
}

export function CompanyTicketsCard({ stats }: CompanyTicketsCardProps) {
  return (
    <div className="flex flex-col items-center justify-center h-full w-full p-12 bg-purple-500/10 border-4 border-purple-500 rounded-3xl">
      {/* Title */}
      <div className="text-4xl font-bold text-purple-500 mb-8">
        Key Accounts | Open Tickets
      </div>

      {/* Three gauges in a row */}
      <div className="grid grid-cols-3 gap-8 w-full max-w-5xl">
        {/* Hynes Industries */}
        <GaugeChart
          value={stats.hynesCount}
          max={50}
          label="Hynes Industries"
          breakpoints={{
            green: 20,
            yellow: 35,
            red: 50,
          }}
        />

        {/* Seubert and Associates */}
        <GaugeChart
          value={stats.seubertCount}
          max={40}
          label="Seubert and Associates"
          breakpoints={{
            green: 15,
            yellow: 25,
            red: 40,
          }}
        />

        {/* Universal Plastics */}
        <GaugeChart
          value={stats.universalCount}
          max={20}
          label="Universal Plastics"
          breakpoints={{
            green: 8,
            yellow: 14,
            red: 20,
          }}
        />
      </div>
    </div>
  );
}