import * as React from 'react';
import Link from 'next/link';
import {Layouts} from '@tesseract-design/viewfinder-react';
import * as WebNavigationReact from '@tesseract-design/web-navigation-react';
import {ShowcaseItem, ShowcaseItemProps} from '@/components/molecules/ShowcaseItem';

interface EnvisionSectionDatum extends ShowcaseItemProps {
	id: string;
	url: string;
}

export interface EnvisionSectionProps {
	data: EnvisionSectionDatum[];
}

export const EnvisionSection: React.FC<EnvisionSectionProps> = ({
	data,
}) => (
	<div className="py-12 sm:py-24 flex items-center min-h-full bg-negative relative">
		<Layouts.Basic.ContentContainer
			span="wide"
		>
			<div className="pb-8">
				<h2 className="text-base leading-none m-0">
					<span className="text-7xl sm:text-8xl">
						I
						{' '}
						<Link
							className="no-underline px-1 -mx-1"
							href={{
								query: {
									featured: 'all',
								},
							}}
						>
							envision.
						</Link>
					</span>
				</h2>
				<div className="flex gap-2 font-headings lowercase text-3xl sm:text-4xl leading-none font-normal">
					<div><Link href={{ query: { featured: 'ideas' }}} className="p-1 -m-1 after:content-['.']">Ideas</Link></div>
					<div><Link href={{ query: { featured: 'methods' }}} className="p-1 -m-1 after:content-['.']">Methods</Link></div>
					<div><Link href={{ query: { featured: 'solutions' }}} className="p-1 -m-1 after:content-['.']">Solutions</Link></div>
				</div>
			</div>
			<div className="flex flex-col xs:grid xs:grid-cols-2 gap-8">
				{data.map(({ id, url, ...datum }) => (
					<div key={id}>
						<a href={url} className="block">
							<ShowcaseItem {...datum} />
						</a>
					</div>
				))}
			</div>
			<div className="flex justify-end mt-8">
				<div className="w-40">
					<WebNavigationReact.LinkButton
						component={Link as unknown as 'a'}
						href={{
							pathname: '/featured',
						} as unknown as string}
						menuItem
						block
						subtext="Featured"
					>
						Browse
					</WebNavigationReact.LinkButton>
				</div>
			</div>
		</Layouts.Basic.ContentContainer>
	</div>
);
