'use client'
import { FC } from 'react'
import Image from 'next/image'
import { Brand } from '../types/Types'

interface Props {
    brand: Brand
}

const BrandIntro: FC<Props> = ({ brand }) => {
    return (
        <div className='bg-[#FAFAFA] rounded-2xl p-6 px-24 mb-8 flex justify-between'>
            <div className='flex gap-10'>
                <div className='bg-[#F2F2F2] size-[118px] rounded-xl flex items-center justify-center'>
                    <Image
                        src={brand.logoUrl}
                        width={112}
                        height={112}
                        alt={brand.title_fa}
                        className='object-contain max-w-[100px] max-h-[100px]'
                    />
                </div>

                <div>
                    <h1 className='text-[#333333] text-xl '>
                        {brand.title_en?.toUpperCase()}
                    </h1>
                    <h4 className='text-[#999999] text-sm mt-2'>
                        {brand.title_fa}
                    </h4>

                    <p className='mt-7 text-[#333333] text-sm'>
                        {brand.description}
                    </p>
                </div>
            </div>
        </div>
    )
}

export default BrandIntro
