"use client";

import type { BlockStyle } from "@/lib/landing-default";

const WIDTHS = [
  { label: "Larga", value: 0 },
  { label: "720px", value: 720 },
  { label: "560px", value: 560 },
  { label: "420px", value: 420 },
];

type Props = {
  style: BlockStyle;
  onChange: (style: BlockStyle) => void;
};

export default function BlockStyleBar({ style, onChange }: Props) {
  return (
    <div className="block-style-bar" onClick={(e) => e.stopPropagation()}>
      <span className="block-style-label">Alinhar</span>
      {(["left", "center", "right"] as const).map((align) => (
        <button
          key={align}
          type="button"
          className={style.align === align ? "on" : ""}
          title={align === "left" ? "Esquerda" : align === "center" ? "Centro" : "Direita"}
          onClick={() => onChange({ ...style, align })}
        >
          {align === "left" ? "⫷" : align === "center" ? "☰" : "⫸"}
        </button>
      ))}
      <span className="block-style-label">Largura</span>
      <select
        value={String(style.maxWidth)}
        onChange={(e) => onChange({ ...style, maxWidth: Number(e.target.value) })}
      >
        {WIDTHS.map((w) => (
          <option key={w.value} value={w.value}>
            {w.label}
          </option>
        ))}
      </select>
    </div>
  );
}