import React from 'react';
import GaugeCard from './GaugeCard';

interface GaugeDashboardProps {
  data?: {
    insertSpeed?: number;
    diskUsage?: number;
    queryTime?: number;
  };
}

const GaugeDashboard: React.FC<GaugeDashboardProps> = ({ data }) => {
  const gaugeData = [
    {
      title: '실시간 인서트 속도',
      subtitle: '(Rows/sec)',
      value: data?.insertSpeed?.toLocaleString() || '12,500',
      subValue: '',
      percentage: 95,
      maxPercentage: 100,
      color: '#4ade80',
      gradientColors: {
        start: '#10b981',
        middle: '#4ade80',
        end: '#86efac',
      },
    },
    {
      title: '디스크 게이지',
      subtitle: '(SSD 500GB+ 기준)',
      value: `${data?.diskUsage?.toFixed(1) || '245.6'} GB`,
      subValue: '',
      percentage: 49.12,
      maxPercentage: 100,
      color: '#a3e635',
      gradientColors: {
        start: '#84cc16',
        middle: '#a3e635',
        end: '#bef264',
      },
    },
    {
      title: '평균 쿼리 응답 지연시간',
      subtitle: '(ms)',
      value: data?.queryTime?.toLocaleString() || '1,240',
      subValue: '',
      percentage: 49.6, // 1240ms / 2500ms * 100
      maxPercentage: 100,
      color: '#fbbf24',
      gradientColors: {
        start: '#f59e0b',
        middle: '#fbbf24',
        end: '#fcd34d',
      },
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 p-8">
      {/* 메인 컨테이너 */}
      <div className="max-w-7xl mx-auto">
        {/* 게이지 카드 그리드 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {gaugeData.map((gauge, index) => (
            <div key={index} className="relative">
              <GaugeCard
                title={gauge.title}
                subtitle={gauge.subtitle}
                value={gauge.value}
                subValue={gauge.subValue}
                percentage={gauge.percentage}
                maxPercentage={gauge.maxPercentage}
                color={gauge.color}
                gradientColors={gauge.gradientColors}
              />
            </div>
          ))}
        </div>

        {/* 하단 인증 정보 */}
        <div className="mt-8 text-center">
          <p className="text-xs text-slate-500">
            Authenticated User: test | Access Key: test
          </p>
        </div>
      </div>
    </div>
  );
};

export default GaugeDashboard;
