Mana-Loop/src/components/game/crafting/EnchantmentDesigner/DesignForm.tsx

'use client';

import { ActionButton } from '@/components/ui/action-button';
import { StatRow } from '@/components/ui/stat-row';
import type { DesignFormProps } from './types';
import { DebugName } from '@/components/game/debug/debug-context';

export function DesignForm({
  designName,
  setDesignName,
  selectedEffects,
  designCapacityCost,
  selectedEquipmentCapacity,
  isOverCapacity,
  designTime,
  handleCreateDesign,
}: DesignFormProps) {
  return (
    <DebugName name="DesignForm">
    <div className="space-y-2">
      <input
        type="text"
        placeholder="Design name..."
        value={designName}
        onChange={(e) => setDesignName(e.target.value)}
        className="w-full bg-[var(--bg-sunken)] border border-[var(--border-default)] rounded px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--border-focus)]"
        aria-label="Design name"
      />
      <StatRow
        label="Total Capacity:"
        value={
          <span className={isOverCapacity ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
            {designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
          </span>
        }
      />
      <StatRow
        label="Design Time:"
        value={`${designTime.toFixed(1)}h`}
        highlight="default"
      />
      <ActionButton
        className="w-full"
        disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
        onClick={handleCreateDesign}
      >
        {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
      </ActionButton>
    </div>
    </DebugName>
  );
}

DesignForm.displayName = 'DesignForm';