src/components/RecordButton.tsx

'use client';

import { cn } from '@/lib/utils';

type Props = {
  recording: boolean;
  onClick: () => void;
  disabled?: boolean;
};

export function RecordButton({ recording, onClick, disabled }: Props) {
  return (
    <button

      type="button"

      disabled={disabled}

      onClick={onClick}

      className={cn(

        'flex h-[76px] w-[76px] items-center justify-center rounded-full',

        'border-[4px] border-white bg-transparent transition-transform duration-150',

        'active:scale-95 disabled:opacity-40',

      )}

      aria-label={recording ? 'Stop recording' : 'Start recording'}

    >

      <span

        className={cn(

          'block bg-[#EE4040] transition-[width,height,border-radius] duration-200 ease-out',

          recording ? 'h-[26px] w-[26px] rounded-md' : 'h-[56px] w-[56px] rounded-full',

        )}

      />

    </button>
  );
}