"use client";

import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import { useState } from "react";

interface InsertScreenButtonProps {
  onInsert: () => void;
}

export function InsertScreenButton({ onInsert }: InsertScreenButtonProps) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="group relative flex h-0 items-center justify-center transition-all"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Hover area - wider for easier interaction */}
      <div className="absolute inset-0 h-12 -translate-y-1/2 -mx-8" />
      
      {/* Divider line */}
      <div
        className={cn(
          "absolute left-0 right-0 h-px transition-all",
          isHovered ? "bg-primary/40" : "bg-transparent"
        )}
      />

      {/* Insert button */}
      <button
        type="button"
        onClick={onInsert}
        className={cn(
          "relative z-10 flex h-7 w-7 items-center justify-center rounded-full border-2 bg-background shadow-sm transition-all",
          isHovered
            ? "scale-110 border-primary/50 text-primary hover:bg-primary hover:text-primary-foreground"
            : "scale-90 border-border/40 text-muted-foreground opacity-0 group-hover:opacity-100"
        )}
        aria-label="Вставить экран"
      >
        <Plus className="h-3.5 w-3.5" />
      </button>
    </div>
  );
}
