/**
 * AssetSelectCompact Component
 *
 * Compact asset selector for constructor forms.
 * Displays a label and select dropdown with asset options.
 */

import React from 'react';
import type { AssetOption } from './types';
import { addFallbackAssetOption } from '../../lib/constructorHelpers';

interface AssetSelectCompactProps {
  label: string;
  value: string;
  options: AssetOption[];
  placeholder?: string;
  durationNote?: string;
  fallbackLabel?: string;
  onChange: (value: string) => void;
}

const AssetSelectCompact: React.FC<AssetSelectCompactProps> = ({
  label,
  value,
  options,
  placeholder = 'Not selected',
  durationNote,
  fallbackLabel,
  onChange,
}) => {
  const selectOptions = addFallbackAssetOption(
    options,
    value,
    fallbackLabel || `Current value · ${value}`,
  );

  return (
    <div>
      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
        {label}
      </label>
      <select
        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
        value={value}
        onChange={(event) => onChange(event.target.value)}
      >
        <option value=''>{placeholder}</option>
        {selectOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {durationNote && (
        <p className='mt-1 text-[11px] text-gray-500'>{durationNote}</p>
      )}
    </div>
  );
};

export default AssetSelectCompact;
