import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { PageLayoutProps } from '@/types/common';
import { FaPlus } from 'react-icons/fa';
import { IoReturnUpBack } from 'react-icons/io5';
import { useRouter } from 'next/navigation';

export function PageLayout({
  title,
  addButtonText,
  onAddClick,
  children,
  className = '',
  backButton = true,
}: PageLayoutProps) {
  const router = useRouter();
  return (
    <div className={`flex flex-col gap-6 mx-auto text-white min-h-full h-fit w-full mt-1 ${className}`}>
      <div className='flex flex-wrap flex-row justify-between lg:items-center gap-2'>
        <h1 className='text-2xl lg:text-4xl font-bold text-neutral-800 capitalize'>{title}</h1>
        <div className='flex items-center gap-4'>
          {backButton && (
            <Button variant='default' className='w-fit' onClick={() => router.push('/dashboard')}>
              <IoReturnUpBack className='mr-2' />
              Back to Dashboard
            </Button>
          )}
          {addButtonText && (
            <Button variant='default' className='w-fit' onClick={onAddClick}>
              <FaPlus className='mr-2' />
              {addButtonText}
            </Button>
          )}
        </div>
      </div>
      <Card className='bg-neutral-900 border-none'>
        <CardContent className='p-3 sm:p-4 md:p-6 space-y-6 h-full'>{children}</CardContent>
      </Card>
    </div>
  );
}
