"use client";

import { cn } from "@/lib/utils";

type Position =
  | "left top"
  | "center top"
  | "right top"
  | "left center"
  | "center center"
  | "right center"
  | "left bottom"
  | "center bottom"
  | "right bottom";

const positions: Position[] = [
  "left top", "center top", "right top",
  "left center", "center center", "right center",
  "left bottom", "center bottom", "right bottom",
];

interface ObjectPositionControlProps {
  value: string;
  onChange: (value: Position) => void;
}

export function ObjectPositionControl({ value, onChange }: ObjectPositionControlProps) {
  return (
    <div className="grid grid-cols-3 gap-1 w-24 h-24 p-1 rounded-md bg-muted">
      {positions.map((pos) => (
        <button
          key={pos}
          type="button"
          onClick={() => onChange(pos)}
          className={cn(
            "rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
            value === pos
              ? "bg-primary"
              : "bg-muted-foreground/20 hover:bg-muted-foreground/40"
          )}
          aria-label={`Set object position to ${pos.replace(' ', ' ')}`}
        />
      ))}
    </div>
  );
}