interface Props {
  title: string;
  onEdit: () => void;
  onDelete: () => void;
}

export default function DividerCard({ title, onEdit, onDelete }: Props) {
  return (
    <div className="h-full flex items-center bg-gray-900/30 rounded border border-gray-600/40 px-4 gap-4 overflow-hidden">
      <span className="text-sm font-bold text-gray-200 uppercase tracking-widest shrink-0">
        {title}
      </span>
      <div className="flex-1 h-px bg-gray-600" />
      <div className="flex gap-1 shrink-0">
        <button
          aria-label="Edit divider"
          onClick={onEdit}
          className="text-xs text-gray-500 hover:text-white px-1.5 py-0.5 rounded hover:bg-gray-700"
        >
          ✏️
        </button>
        <button
          aria-label="Delete divider"
          onClick={onDelete}
          className="text-xs text-gray-500 hover:text-red-400 px-1.5 py-0.5 rounded hover:bg-gray-700"
        >
          🗑
        </button>
      </div>
    </div>
  );
}
