'use client';
import { PortfolioElement } from '@/src/types/portfolio';
import { ComponentStyler } from '@/components/builder/common/ComponentStyler';
import { SliderWithInput } from '@/components/common/SliderWithInput';
import { EditFormProps } from '@/types/common';
import { SocialsRepeater } from '@/components/builder/common/SocialsRepeater';
import { Social } from '@/types/social';

export function SocialsEditForm({ props, onPropChange }: EditFormProps) {
  const socials = (props.socials as Social[]) || [];
  return (
    <div className='space-y-4'>
      <SocialsRepeater socials={socials} onChange={(value) => onPropChange('socials', value)} />

      <SliderWithInput
        min={16}
        max={100}
        step={1}
        value={props.width as number}
        onChange={(value) => onPropChange('width', value)}
        label='Width'
      />

      <ComponentStyler
        styling={props.styling as PortfolioElement['styling']}
        onStylingChange={(styling) => onPropChange('styling', styling)}
        enabledOptions={{
          padding: true,
          alignment: true,
          textColor: true,
        }}
      />
    </div>
  );
}
