'use client';

import { useState } from 'react';
import type { WakeWordIndicatorProps } from '@/types/component-props';

export default function WakeWordIndicator({
  isListening,
  wakeWord,
  onWakeWordDetected,
}: WakeWordIndicatorProps) {
  const [lastDetectionTime, setLastDetectionTime] = useState<number | null>(null);

  return (
    <div className={`
      px-4 py-2 rounded-lg border-2 transition-all duration-200
      ${isListening
        ? 'border-green-500 bg-green-50'
        : 'border-gray-300 bg-gray-50'
      }
    `}>
      <div className="flex items-center gap-2">
        <div className={`
          w-3 h-3 rounded-full transition-all
          ${isListening ? 'bg-green-500 animate-pulse' : 'bg-gray-400'}
        `} />
        <span className="text-sm font-medium text-gray-700">
          {isListening ? 'Listening for' : 'Say'} "{wakeWord}"
        </span>
      </div>
      {lastDetectionTime && (
        <p className="text-xs text-gray-500 mt-1">
          Last detected: {new Date(lastDetectionTime).toLocaleTimeString()}
        </p>
      )}
    </div>
  );
}