import type { FC } from 'react'
import { Paths } from '@/config/Paths'
import { Add } from 'iconsax-react'
import { Link } from 'react-router-dom'
import AddCatalogueIcon from '@/assets/icons/add_catalogue.svg'

type Props = {
    isFirst: boolean
}

const ButtonAddCatalogue: FC<Props> = ({ isFirst }) => {

    if (isFirst) {
        return (
            <Link
                to={Paths.home}
                className="flex-1 flex-col bg-white min-w-[40%] rounded-3xl xl:p-6 p-4 xl:min-w-[20%]  flex justify-center items-center min-h-[152px]"
            >
                <img src={AddCatalogueIcon} alt="add-catalogue" className='size-12' />
                <div className='mt-4 flex gap-1 items-center'>
                    <Add size={22} color="#000" />
                    <div className='text-xs'>کاتالوگ جدید</div>
                </div>
            </Link>
        )
    }

    return (
        <Link
            to={Paths.home}
            className="flex-1 min-w-[40%] xl:p-6 p-4 xl:min-w-[20%]  flex justify-center items-center min-h-[152px]"
            style={{
                position: 'relative',
            }}
        >
            <svg
                width="100%"
                height="100%"
                xmlns="http://www.w3.org/2000/svg"
                style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    zIndex: -1,
                    borderRadius: '22px',
                }}
            >
                <rect
                    width="100%"
                    height="100%"
                    fill="none"
                    // rx="22"
                    ry="22"
                    stroke="#8C90A3"
                    strokeWidth="2"
                    strokeDasharray="6,14"
                // strokeDashoffset="25"
                />
            </svg>
            <div style={{ zIndex: 1 }}>
                <Add size={38} color="#8C90A3" />
            </div>


        </Link>
    )
}

export default ButtonAddCatalogue