'use client';

import { useRouter } from 'next/navigation';

import { ArrowLeft } from '@/public/assets/arrow-left';

import { Trans } from '@kit/ui/trans';

export function BackButton({ onBack }: { onBack?: () => void }) {
  const router = useRouter();
  return (
    <form
      action={() => {
        if (onBack) {
          onBack();
        } else {
          router.back();
        }
      }}
    >
      <button className="absolute top-4 left-4 flex cursor-pointer flex-row items-center gap-3">
        <div className="flex items-center justify-center rounded-sm border p-3">
          <ArrowLeft />
        </div>
        <span className="text-sm">
          <Trans i18nKey="common:goBack" />
        </span>
      </button>
    </form>
  );
}