import React from 'react'
import { Link } from 'gatsby'

const Point = ({title, ico, className, link, to = '/', textsize, ...props}) => {
    
    const Inner = () => {
        return (
            <div className="p-1 pt-7 max-md:pt-4 mr-5 max-md:mr-4 mb-5 max-mb:mb-4 w-[200px] h-[200px] max-2xl:w-[195px] max-2xl:h-[195px] max-md:w-[155px] max-md:h-[155px] bg-[#F7F7FF] rounded-[20px] flex flex-col items-center text-slate-800">
                <span className="mb-5 max-md:mb-3 text-7xl max-md:text-6xl">{ico}</span>
                <p className={textsize === 'lg' ? 'whitespace-pre-wrap text-center text-lg max-md:text-sm leading-[1.3]' : 'whitespace-pre-wrap text-center text-xl max-md:text-lg'}>{title}</p>
            </div>
        )
    }
    return (
        <>
            {link
            ?
                <Link to={to} className={['', className].join(' ')} {...props}>
                    <Inner/>
                </Link>
            :
                <div className={['', className].join(' ')} {...props}>
                    <Inner/>
                </div>
            }
        </>
        
    )
}

export default Point;