'use client'

import { HeaderBlock as HeaderBlockType } from '../types'
import { Building2 } from 'lucide-react'

interface HeaderBlockProps {
  block: HeaderBlockType
  onChange: (block: HeaderBlockType) => void
  isEditing?: boolean
}

export function HeaderBlockEditor({ block, onChange, isEditing = true }: HeaderBlockProps) {
  const alignClass =
    block.alignment === 'left'
      ? 'text-left'
      : block.alignment === 'right'
        ? 'text-right'
        : 'text-center'

  return (
    <div className={`py-4 ${alignClass}`}>
      <div className="inline-flex items-center gap-3">
        {block.logoUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={block.logoUrl}
            alt={block.companyName}
            className="h-10 w-auto"
          />
        ) : (
          <div className="h-10 w-10 rounded bg-gray-100 flex items-center justify-center">
            <Building2 className="h-5 w-5 text-gray-400" />
          </div>
        )}
        <span className="text-xl font-semibold">{block.companyName}</span>
      </div>
    </div>
  )
}