'use client'

import { Section } from '../types'
import { Input } from '../../ui/input'
import { Label } from '../../ui/label'

interface SectionSettingsPanelProps {
  section: Section
  onChange: (section: Section) => void
}

export function SectionSettingsPanel({ section, onChange }: SectionSettingsPanelProps) {
  return (
    <div className="space-y-4">
      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
        Section Settings
      </div>

      <div className="space-y-1">
        <Label className="text-xs">Background Color</Label>
        <div className="flex gap-2">
          <input
            type="color"
            value={section.backgroundColor || '#ffffff'}
            onChange={(e) => onChange({ ...section, backgroundColor: e.target.value })}
            className="h-8 w-8 rounded border cursor-pointer"
          />
          <Input
            value={section.backgroundColor || ''}
            onChange={(e) => onChange({ ...section, backgroundColor: e.target.value })}
            placeholder="transparent"
            className="h-8 text-xs"
          />
        </div>
      </div>

      <div className="space-y-3">
        <div className="text-xs font-medium text-muted-foreground">Padding</div>
        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">Top</Label>
            <Input
              type="number"
              value={section.paddingTop ?? 16}
              onChange={(e) => onChange({ ...section, paddingTop: parseInt(e.target.value) || 0 })}
              className="h-8 text-xs"
            />
          </div>
          <div className="space-y-1">
            <Label className="text-xs">Bottom</Label>
            <Input
              type="number"
              value={section.paddingBottom ?? 16}
              onChange={(e) => onChange({ ...section, paddingBottom: parseInt(e.target.value) || 0 })}
              className="h-8 text-xs"
            />
          </div>
          <div className="space-y-1">
            <Label className="text-xs">Left</Label>
            <Input
              type="number"
              value={section.paddingLeft ?? 0}
              onChange={(e) => onChange({ ...section, paddingLeft: parseInt(e.target.value) || 0 })}
              className="h-8 text-xs"
            />
          </div>
          <div className="space-y-1">
            <Label className="text-xs">Right</Label>
            <Input
              type="number"
              value={section.paddingRight ?? 0}
              onChange={(e) => onChange({ ...section, paddingRight: parseInt(e.target.value) || 0 })}
              className="h-8 text-xs"
            />
          </div>
        </div>
      </div>
    </div>
  )
}