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

export function HeadingEditForm({ props, onPropChange }: EditFormProps) {
  return (
    <div className='space-y-4'>
      <div className='space-y-2'>
        <Label>Text</Label>
        <Input value={props.text as string} onChange={(e) => onPropChange('text', e.target.value)} />
      </div>
      <ComponentStyler
        styling={props.styling as PortfolioElement['styling']}
        onStylingChange={(styling) => onPropChange('styling', styling)}
        enabledOptions={{
          padding: true,
          textColor: true,
          fontSize: true,
          fontWeight: true,
          alignment: true,
          textDecoration: true,
          fontFamily: true,
          fontStyle: true,
        }}
      />
    </div>
  );
}
