audio-ui/components/effects/EffectDevice.tsx

'use client';

import * as React from 'react';
import { ChevronDown, ChevronUp, Power, X } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils/cn';
import type { ChainEffect } from '@/lib/audio/effects/chain';

export interface EffectDeviceProps {
  effect: ChainEffect;
  onToggleEnabled?: () => void;
  onRemove?: () => void;
  onUpdateParameters?: (parameters: any) => void;
}

export function EffectDevice({
  effect,
  onToggleEnabled,
  onRemove,
  onUpdateParameters,
}: EffectDeviceProps) {
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <div
      className={cn(
        'flex-shrink-0 w-48 border border-border rounded-md overflow-hidden',
        effect.enabled ? 'bg-accent/30' : 'bg-muted/30'
      )}
    >
      {/* Device Header */}
      <div className="flex items-center justify-between px-2 py-1.5 border-b border-border bg-card/50">
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="flex items-center gap-1 flex-1 min-w-0 text-left hover:text-primary transition-colors"
        >
          <span className="text-xs font-medium truncate">{effect.name}</span>
          {isExpanded ? (
            <ChevronUp className="h-3 w-3 flex-shrink-0" />
          ) : (
            <ChevronDown className="h-3 w-3 flex-shrink-0" />
          )}
        </button>
        <div className="flex items-center gap-0.5 ml-1">
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={onToggleEnabled}
            title={effect.enabled ? 'Disable effect' : 'Enable effect'}
            className="h-5 w-5"
          >
            <Power
              className={cn(
                'h-3 w-3',
                effect.enabled ? 'text-primary' : 'text-muted-foreground'
              )}
            />
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={onRemove}
            title="Remove effect"
            className="h-5 w-5"
          >
            <X className="h-3 w-3 text-destructive" />
          </Button>
        </div>
      </div>

      {/* Device Parameters */}
      {isExpanded && (
        <div className="p-2 space-y-2 bg-card/30">
          <div className="text-xs text-muted-foreground">
            <div className="mb-1">
              <span className="font-medium">Type:</span> {effect.type}
            </div>
            {effect.parameters && Object.keys(effect.parameters).length > 0 && (
              <div>
                <span className="font-medium">Parameters:</span>
                <div className="mt-1 space-y-1 pl-2">
                  {Object.entries(effect.parameters).map(([key, value]) => (
                    <div key={key} className="flex justify-between">
                      <span className="text-muted-foreground/70">{key}:</span>
                      <span>{String(value)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
          <div className="text-xs text-muted-foreground/70 italic">
            Parameter controls coming soon
          </div>
        </div>
      )}

      {/* Collapsed State Indicator */}
      {!isExpanded && (
        <div className="px-2 py-1 text-center">
          <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
            {effect.type}
          </span>
        </div>
      )}
    </div>
  );
}