import React from 'react'

import { Button } from 'antd'
import { Link } from 'react-router-dom'

import WelcomeImg from './welcome.svg'

const Page: React.FC = () => {
  return (
    <div className='flex flex-col items-center h-full w-[460px] m-auto'>
      <section className='mt-8 text-center flex flex-col'>
        <h1 className='text-4xl'>Welcome!</h1>
        <span className='text-xl'>
          You can create a new Clinic Organization.
        </span>
        <span className='text-sm text-gray-500'>
          After creating, you can upload and explore your cluster data.
        </span>
      </section>

      <section className='py-8'>
        <Link to='/orgs/new'>
          <Button type='primary'>Create an Organization</Button>
        </Link>
      </section>

      <section className='pt-8'>
        <WelcomeImg />
      </section>
    </div>
  )
}

export default Page