import Image from 'next/image';
import Link from 'next/link';
import React, { FC } from 'react'

type Props = {
    image: string;
    title: string;
    categoryUrl: string;
}

const CategoryItem: FC<Props> = (props) => {
    return (
        <Link href={`/products/${props.categoryUrl}`} className='text-center block hover:opacity-80 transition-opacity'>
            <div className='size-[80px] sm:size-[100px] md:size-[113px] rounded-full overflow-hidden'>
                <Image src={props.image} alt={props.title} width={113} height={113} className='w-full h-full object-cover' />
            </div>
            <div className='mt-2 sm:mt-3 text-xs sm:text-sm text-[#191919]'>
                {props.title}
            </div>
        </Link>
    )
}

export default CategoryItem