"use client";

import { useState, useRef } from "react";
import { ArrowRight, Plus, StretchHorizontal, Table } from "lucide-react";
import "./style/home-page2.css";
import { useRouter } from "next/navigation";

export function HomePage2() {
  const router = useRouter();
  const [activeTool, setActiveTool] = useState("stretch");
  return (
    <div className="min-h-[100%] flex relative">
      {/* 工具栏-列表形式切换 */}
      <div className="absolute top-0 right-6 w-[8rem] flex z-index-2 justify-end">
        <div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
          <button 
            className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
              ${activeTool === "stretch" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`} 
            onClick={() => setActiveTool("stretch")}
          >
            <StretchHorizontal className="w-5 h-5" />
          </button>
          <button 
            className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
              ${activeTool === "table" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`} 
            onClick={() => setActiveTool("table")}
          >
            <Table className="w-5 h-5" />
          </button>
        </div>
      </div>

      <div className="fixed bottom-[3.5rem] left-[50%] translate-x-[-50%] bg-white/10 backdrop-blur-lg rounded-[32px]">
        <button className="add-project-btn" onClick={() => router.push("/create")}>
          {/* 添加图标 */}
          <Plus className="w-6 h-6 icon" />
          <div className="btn-text">Create Project</div>
        </button>
      </div>
    </div>
  );
}