import { primaryButtonClass } from "./modalUi";
import {Plus, SquareChartGantt} from "lucide-react";
import {Button} from "~/components/ui/button";

type WelcomePanelProps = {
  onCreateScript: () => void;
};

export function WelcomePanel({ onCreateScript }: WelcomePanelProps) {
  return (
    <div className="welcome-panel-shell flex min-h-full flex-col items-center justify-center p-[35px] text-center">
      <div className="mb-[21px] grid size-[86px] place-items-center rounded-[25px] border border-[#cfe0f0] bg-gradient-to-br from-white to-[#eaf4fd] text-[#3d8cd9] shadow-lg">
        <SquareChartGantt size={42}/>
      </div>
      <span className="text-[10px] font-extrabold tracking-[0.12em] text-[#2e81ce]">
        构建脚本工作台
      </span>
      <h2 className="mb-[7px] mt-[9px] text-[23px] text-[#21354c]">
        创建你的第一个模型脚本
      </h2>
      <p className="mb-[22px] w-full max-w-[430px] text-xs leading-[1.8] text-[#76879a]">
        通过 Notebook 完成数据探索，或使用 Python 脚本构建可调度的处理任务。
      </p>
      <Button className={primaryButtonClass} type="button" onClick={onCreateScript}>
        <Plus size={17} />
        新建构建脚本
      </Button>
    </div>
  );
}