"use client";

import { ChevronRight } from "lucide-react";
import type { PersonaState } from "@/shared/ai-elements/persona";
import { cn } from "@/lib/utils";
import { MAP_MAJOR_PANEL_RADIUS_CLASS_NAME } from "@/features/map/core/components/map-control-styles";
import { AgentPersona } from "./agent-persona";

type AgentCollapsedRailProps = {
  personaState?: PersonaState;
  onExpand: () => void;
};

export function AgentCollapsedRail({ personaState, onExpand }: AgentCollapsedRailProps) {
  return (
    <aside
      aria-label="Agent 折叠栏"
      className={cn(
        "agent-rail-enter acrylic-panel pointer-events-auto w-[136px] border p-1.5",
        MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
      )}
    >
      <button
        type="button"
        aria-label="展开排水助手面板"
        title="展开排水助手面板"
        onClick={onExpand}
        className="agent-rail-item surface-control group flex h-14 w-full items-center justify-center gap-4 rounded-xl border px-3 transition-[background-color,transform] hover:bg-white active:scale-95"
      >
        <AgentPersona className="h-12 w-12" state={personaState} />
        <span className="agent-panel-primary-icon grid h-8 w-8 shrink-0 place-items-center rounded-lg border-0! transition-transform group-hover:translate-x-0.5">
          <ChevronRight size={17} strokeWidth={2.25} aria-hidden="true" />
        </span>
      </button>
    </aside>
  );
}