type CustomWorldCreationStartCardProps = {
  onCreateNew: () => void;
};

export function CustomWorldCreationStartCard({
  onCreateNew,
}: CustomWorldCreationStartCardProps) {
  return (
    <div className="platform-surface platform-surface--hero relative overflow-hidden px-5 py-5">
      <div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
      <div className="relative z-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <div className="text-2xl font-black text-white sm:text-3xl">
            新建作品
          </div>
        </div>
        <button
          type="button"
          onClick={onCreateNew}
          className="platform-button platform-button--primary w-full justify-between rounded-[1.1rem] text-left sm:w-auto"
        >
          <span className="text-sm font-semibold">新建作品</span>
          <span aria-hidden="true">→</span>
        </button>
      </div>
    </div>
  );
}