'use client';
import { Label } from '@/components/ui/label';
import TechnologySelector from '@/src/components/builder/technologies/TechnologySelector';
import { PortfolioElement } from '@/src/types/portfolio';
import { ComponentStyler } from '../common/ComponentStyler';
import { EditFormProps } from '@/types/common';

export function TechnologyEditForm({ props, onPropChange, layout }: EditFormProps) {
  return (
    <div className='space-y-4'>
      <div className='space-y-2'>
        <Label>Technologies</Label>
        <TechnologySelector
          selectedTechnologies={(props.technologies as string[]) || []}
          onTechnologySelect={(tech) => {
            const currentTechs = (props.technologies as string[]) || [];
            if (typeof tech === 'string') {
              onPropChange('technologies', [...currentTechs, tech]);
            }
          }}
          removeTechnology={(tech) => {
            const currentTechs = (props.technologies as string[]) || [];
            onPropChange(
              'technologies',
              currentTechs.filter((t) => t !== tech)
            );
          }}
        />
      </div>
      <ComponentStyler
        styling={props.styling as PortfolioElement['styling']}
        onStylingChange={(styling) => onPropChange('styling', styling)}
        enabledOptions={{
          padding: true,
          backgroundColor: true,
          alignment: layout !== 'tech_2',
          color: layout !== 'tech_2',
          ...(layout !== 'tech_2' && {
            width: { min: 32, max: 100, defaultValue: 72 }
          })
        }}
      />
    </div>
  );
}
