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

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

export default Point;