import Button from '@/components/Button';
import { Icon } from '@iconify/react';

interface FormHeaderProps {
  type?: 'add' | 'edit' | 'detail';
  title: string;
  backUrl?: string;
  onBackClick?: () => void;
}

export const FormHeader = ({
  type,
  title,
  backUrl,
  onBackClick,
}: FormHeaderProps) => {
  return (
    <header className='flex flex-col gap-4'>
      <Button
        type='button'
        href={!onBackClick ? backUrl : undefined}
        onClick={onBackClick}
        variant='link'
        className='w-fit p-0 text-primary'
      >
        <Icon icon='uil:arrow-left' width={24} height={24} />
        Kembali
      </Button>
      <h1 className='text-2xl font-bold text-center'>
        {type === 'add' && `Tambah ${title}`}
        {type === 'edit' && `Edit ${title}`}
        {type === 'detail' && `Detail ${title}`}
        {!type && title}
      </h1>
    </header>
  );
};
