"use client";

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

export function HomePage2() {
  const router = useRouter();
  return (
    <div className="min-h-[100%]">
      <div className="px-[16px] pb-[16px] min-w-[1100px] select-none overflow-hidden relative flex flex-col gap-8">
        <div className="flex flex-row gap-[16px]">
          <div className="tab-item" onClick={() => {
            router.push("/create/video-to-video");
          }}>
            <div className="content-wrapper">
              <div className="tab-title">Video To Video</div>
              <div className="tab-description">Transform your video into a new style</div>
              <div className="flex flex-row mt-[30px]">
                <div className="tab-btn hover-btn cursor-pointer">
                  {/* 图标 右箭头 */}
                  <ArrowRight className="w-5 h-5 font-bold icon" />
                  <div className="btn-text">Create</div>
                </div>
              </div>
            </div>
          </div>
          <div className="tab-item">
            <div className="content-wrapper">
              <div className="tab-title">Script To Video</div>
              <div className="tab-description">Transform your script into a video</div>
              <div className="flex flex-row mt-[30px]">
                <div className="tab-btn hover-btn cursor-pointer">
                  {/* 图标 右箭头 */}
                  <ArrowRight className="w-4 h-4 icon" />
                  <div className="btn-text">Create</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}