import { SanityDocument } from '@sanity/client';
import React from 'react';
import { Link } from 'react-router-dom';
import GetInvolvedRow from '../components/GetInvolvedRow';
import Hero from '../components/Hero';
import '../css/get-involved.css';
import sanity from '../sanity';

export default function GetInvolved() {
	let [ways, setWays] = React.useState<
		SanityDocument<SGA.GetInvolvedDocument> | undefined
	>();

	React.useEffect(() => {
		sanity.getDocument<SGA.GetInvolvedDocument>('get_involved').then(setWays);
	}, []);

	return (
		<>
			<Hero heading='Get Involved' />
			<main className='text-center'>
				<h2 className='my-2'>SGA Calendar</h2>
				<iframe
					src='https://calendar.google.com/calendar/u/0/embed?src=mbftfg4hu7i8ueqrgcb5o7hc6k@group.calendar.google.com&ctz=America/New_York'
					title='SGA Calendar'
					width='800'
					height='600'
				/>
				<p className='get-involved-body my-4'>
					Interested in getting involved with SGA? You can run for office, work
					on a project, or apply to a committee. If you just want to share an
					idea or concern or get to know your representatives, reach out to us
					at <b>sga@tjhsst.edu</b>!
				</p>
				{ways ? (
					<>
						<h2 style={{ marginTop: '4rem', marginBottom: '1.5rem' }}>
							Here are some ways to connect with SGA:
						</h2>
						{ways.ways.map((way) => (
							<GetInvolvedRow way={way} key={way._id} />
						))}
					</>
				) : null}
				<Link className='blue-button' to='/feedback'>
					Give Feedback
				</Link>
			</main>
		</>
	);
}