import { GripVertical, ChevronUp, ChevronDown, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge }  from "@/components/ui/badge";

const BLOCK_LABELS = {
  "text":       "Text",
  "image":      "Image",
  "text-image": "Text + Image",
  "video":      "Video",
  "text-video": "Text + Video",
  "audio":      "Audio",
};

export function BlockWrapper({
  type,
  index,
  total,
  onMoveUp,
  onMoveDown,
  onDelete,
  children,
}) {
  return (
    <div className="group relative rounded-lg border bg-card transition-shadow hover:shadow-sm">

      {/* ── Top toolbar ── */}
      <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40 rounded-t-lg">

        {/* Left — drag handle + block type */}
        <div className="flex items-center gap-2">
          <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab" />
          <Badge variant="secondary" className="text-xs">
            {BLOCK_LABELS[type] ?? type}
          </Badge>
          <span className="text-xs text-muted-foreground">
            Block {index + 1}
          </span>
        </div>

        {/* Right — move + delete */}
        <div className="flex items-center gap-1">
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-7 w-7"
            disabled={index === 0}
            onClick={onMoveUp}
          >
            <ChevronUp className="h-4 w-4" />
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-7 w-7"
            disabled={index === total - 1}
            onClick={onMoveDown}
          >
            <ChevronDown className="h-4 w-4" />
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10"
            onClick={onDelete}
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* ── Block content ── */}
      <div className="p-4">
        {children}
      </div>
    </div>
  );
}