'use client';

import { motion } from 'framer-motion';
import { Mic, Square } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { RecordingState } from '@/stores/recorder-store';

interface RecorderButtonProps {
  state: RecordingState;
  onStart: () => void;
  onStop: () => void;
  disabled?: boolean;
  className?: string;
}

export function RecorderButton({
  state,
  onStart,
  onStop,
  disabled,
  className,
}: RecorderButtonProps) {
  const isRecording = state === 'recording';

  return (
    <div className={cn('flex flex-col items-center gap-4', className)}>
      <div className="relative">
        {/* Pulse rings */}
        {isRecording && (
          <>
            <motion.div
              animate={{ scale: [1, 1.6], opacity: [0.3, 0] }}
              transition={{ duration: 1.5, repeat: Infinity }}
              className="absolute inset-0 rounded-full bg-destructive"
            />
            <motion.div
              animate={{ scale: [1, 1.4], opacity: [0.2, 0] }}
              transition={{ duration: 1.5, repeat: Infinity, delay: 0.3 }}
              className="absolute inset-0 rounded-full bg-destructive"
            />
          </>
        )}

        {/* Main button */}
        <motion.button
          whileTap={{ scale: 0.9 }}
          onClick={isRecording ? onStop : onStart}
          disabled={disabled}
          className={cn(
            'relative z-10 flex h-20 w-20 items-center justify-center rounded-full shadow-xl transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
            isRecording
              ? 'bg-destructive text-white shadow-destructive/30'
              : 'gradient-primary text-white shadow-primary/30 hover:shadow-primary/50',
            disabled && 'opacity-50 cursor-not-allowed'
          )}
          aria-label={isRecording ? 'Stop recording' : 'Start recording'}
        >
          {isRecording ? (
            <Square className="h-7 w-7" fill="white" />
          ) : (
            <Mic className="h-8 w-8" />
          )}
        </motion.button>
      </div>

      <p className="text-sm font-medium text-muted-foreground">
        {isRecording
          ? 'Ketuk untuk berhenti'
          : state === 'stopped'
          ? 'Rekaman selesai'
          : 'Ketuk untuk mulai merekam'}
      </p>
    </div>
  );
}