'use client'

import {useTranslations} from 'next-intl'
import Image from 'next/image'

import Fig1 from '@/public/images/above/fig-1.svg'
import Fig2 from '@/public/images/above/fig-2.svg'
import Fig3 from '@/public/images/above/fig-3.svg'

export default function Above() {
	const t = useTranslations('Banner.Above')

	return (
		<div className='bw-above flex h-[51px] w-full items-end justify-center bg-brand-violet'>
			<div className='mx-0 mb-0.5'>
				<Image
					width={72.79}
					height={38.95}
					src={Fig1}
					alt=''
					className='max-h-[35px]'
				/>
			</div>
			<div className='mx-0'>
				<Image
					width={80.21}
					height={43.78}
					src={Fig2}
					alt=''
					className='max-h-[41px]'
				/>
			</div>
			<div className='self-center font-medium text-brand-yellow'>
				{t('title')}
			</div>
			<div className='mx-1'>
				<Image
					width={98.89}
					height={47.27}
					src={Fig3}
					alt=''
					className='max-h-[37px]'
				/>
			</div>
		</div>
	)
}