'use client';

import Button from '@/components/button/PrimaryButton';
import InputField from '@/components/input/InputField';
import { ArrowLeft } from 'iconsax-react';
import Image from 'next/image'
import { useRouter } from 'next/navigation';
import React from 'react'
import { useTranslation } from 'react-i18next'

type Props = object;

function ReportIndex({ }: Props) {
    const router = useRouter();

    const { t } = useTranslation('parallels', {
        keyPrefix: 'Report'
    })

    return (
        <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
            <div className='grid grid-cols-3 items-center'>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>{t("Heading")}</h1>
                <ArrowLeft
                    className='cursor-pointer place-self-end'
                    size='24'
                    color='currentColor'
                    onClick={() => { router.back() }}
                />
            </div>
            <div className="flex lg:justify-center lg:items-center flex-1 bg-inherit">
                <div className="w-full lg:w-fit lg:h-fit lg:min-w-3/4 lg:min-h-3/4 flex flex-col-reverse lg:grid lg:gap-8 lg:bg-container lg:grid-cols-2 lg:p-8 lg:rounded-container lg:justify-around lg:items-center bg-inherit">
                    <form className='flex-1 bg-inherit flex flex-col justify-between items-end'>
                        <div className='bg-inherit lg:max-w-4/5 w-full flex flex-col justify-between flex-1'>
                            <div className="bg-inherit flex flex-col h-full">
                                <div className='w-full px-4 mt-10'>
                                    <h2 className='text-sm2 font-medium'>{t('FormHeading')}</h2>
                                    <p className='text-sm2 text-disabled-text mt-2'>{t('Description')}</p>
                                </div>
                                <InputField
                                    className='w-full mt-6 px-4 bg-inherit'
                                    type='text'
                                    placeholder={t('InputTitle.Placeholder')}
                                    labelText={t('InputTitle.Label')}
                                    htmlFor='report-title'
                                    onChange={() => { }}
                                />

                                <div className='relative bg-inherit mt-6 flex-1'>
                                    <textarea
                                        className='w-full px-4 py-2.5 text-sm2 leading-6 outline-0 border border-border rounded-normal h-full max-h-[200px] min-h-[50px] resize-none focus:ring-0'
                                        placeholder={t('InputDescription.Placeholder')}
                                        id='report-description'
                                        name='report-description'
                                    ></textarea>
                                    <span className='absolute -top-2 right-2 px-2 bg-inherit text-foreground text-xs'>
                                        {t('InputDescription.Label')}
                                    </span>
                                </div>
                            </div>
                            <Button
                                className='w-full px-4 mt-6'
                                type='submit'
                                onClick={() => { }}
                            >
                                {t('ButtonSubmit')}
                            </Button>
                        </div>

                    </form>

                    <div className='relative'>
                        <Image
                            className='place-self-center w-full px-4 mt-8 md:max-w-4/5'
                            src={'/assets/images/report-hero.svg'}
                            height={200}
                            width={312}
                            unoptimized
                            alt='report hero image'
                        />
                        <hr className='absolute bottom-0 left-9 right-4 border-border' />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ReportIndex