'use client';
import { IconButton } from '@/components/ui/button';
import { useRouter } from 'next/navigation';
import { useLayoutStore } from '@/stores';

type ProfileLayoutProps = {
  children?: React.ReactNode;
  title?: string;
  rightDom?: React.ReactNode;
  bottomButton?: React.ReactNode;
};

export default function ProfileLayout(props: ProfileLayoutProps) {
  const { children, title, rightDom, bottomButton } = props;
  const router = useRouter();
  const response = useLayoutStore((s) => s.response);

  return (
    <div className="mx-auto px-4 h-full flex flex-col max-w-[752px] pt-6">
      {/* 标题栏 */}
      <div className="mb-6 flex shrink-0 justify-between items-center">
        <div className="flex items-center gap-2">
          <IconButton variant="ghost" size="large" onClick={() => router.back()} className="p-2">
            <i className="iconfont icon-arrow-left !text-[16px]" />
          </IconButton>
          <h1 className="txt-title-l text-txt-primary-normal">{title}</h1>
        </div>
        {rightDom}
      </div>
      <div className="flex-1">{children}</div>
      {bottomButton && response && !response.sm && (
        <div className="shrink-0 h-18 flex items-center">{bottomButton}</div>
      )}
    </div>
  );
}
