import * as React from 'react';

export interface PillarProps {
	children?: React.ReactNode;
}

export const Pillar: React.FC<PillarProps> = ({
	children,
}) => (
	<span className="block h-full w-full relative rounded overflow-hidden">
		<span className="absolute top-0 left-0 w-full h-full bg-current opacity-75" />
		<span className="text-negative absolute bottom-0 right-0 sm:right-auto sm:left-0 text-sm uppercase font-bold whitespace-nowrap p-2 origin-bottom-left -rotate-90 translate-x-full sm:translate-x-0 sm:rotate-0">
			{children}
		</span>
	</span>
);
