import * as React from 'react';

import { css } from '@neliosoft/inlexa/css';
import { _x } from '@neliosoft/inlexa/i18n';
import { colors } from '@neliosoft/inlexa/theme';

export type FullLogoProps = {
	readonly className?: string;
	readonly iconColor?: string;
	readonly textColor?: string;
};

export const FullLogo = ( {
	className,
	iconColor = colors.logo.icon,
	textColor = colors.logo.text,
}: FullLogoProps ): JSX.Element => (
	<svg
		className={ className }
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 320 100"
		height="100"
		width="320"
		aria-role="image"
		aria-label={ _x( 'Inlexa Logo', 'text', 'inlexa' ) }
	>
		<path
			className={ css( { fill: iconColor } ) }
			d="M50,0.000005982750735711306C33.5,0,18.8,8.1,9.7,20.466623306274414C8.3,22.2,7.1,24,6.1,26.027446746826172C2.2,33.1,0,41.3,0,50.00000762939453C0,77.6,22.4,100,50,100.00000762939453C77.6,100,100,77.6,100,50.00000762939453C100,22.4,77.6,0,50,0.000005982750735711306C50,0,50,0,50,0.000005982750735711306M44.3,62.29662322998047C36,62.3,29.2,55.4,29.2,47.013580322265625C29.2,38.6,36,31.7,44.3,31.730533599853516C52.6,31.7,59.4,38.6,59.4,47.013580322265625C59.4,55.4,52.6,62.3,44.3,62.29662322998047C44.3,62.3,44.3,62.3,44.3,62.29662322998047M44.3,27.24983787536621C33.5,27.2,24.7,36.1,24.7,47.013580322265625C24.7,57.9,33.5,66.8,44.3,66.7773208618164C44.4,66.8,44.5,66.8,44.7,66.75835418701172C41.6,68,38.2,68.6,34.7,68.63092803955078C19.5,68.6,7.1,56.1,7.1,40.689815521240234C7.1,36.2,8.2,31.9,10.1,28.15082359313965C11,26.4,12.1,24.7,13.3,23.128482818603516C18.4,16.8,26.1,12.7,34.7,12.748699188232422C49.5,12.7,61.6,24.5,62.3,39.295654296875C59.3,32.2,52.4,27.2,44.3,27.24983787536621C44.3,27.2,44.3,27.2,44.3,27.24983787536621M50,95.5193099975586C25.4,95.5,5.4,76,4.5,51.587005615234375C9,64.1,20.8,73.1,34.7,73.11267852783203C52.4,73.1,66.8,58.6,66.8,40.69086837768555C66.8,22.8,52.4,8.3,34.7,8.269058227539062C33.6,8.3,32.5,8.3,31.5,8.435556411743164C37.1,5.9,43.4,4.5,50,4.479646682739258C75.1,4.5,95.5,24.9,95.5,49.99895095825195C95.5,75.1,75.1,95.5,50,95.5193099975586C50,95.5,50,95.5,50,95.5193099975586"
		/>
		<path
			className={ css( { fill: textColor } ) }
			d="M127,36.48233413696289C127,36.5,127,78,127,78.00674438476562C127,78,120,78,120,78.00674438476562C120,78,120,36.5,120,36.48233413696289C120,36.5,127,36.5,127,36.48233413696289M127,28.939661026000977C127,28.9,120,28.9,120,28.939661026000977C120,28.9,120,21,120,21.000001907348633C120,21,127,21,127,21.000001907348633C127,21,127,28.9,127,28.939661026000977M171.3,49.7415657043457C171.3,49.7,171.3,78,171.3,78.00674438476562C171.3,78,164.3,78,164.3,78.00674438476562C164.3,78,164.3,52.4,164.3,52.44104766845703C164.3,45.2,162.2,41.6,155.4,41.563716888427734C151.4,41.6,144.5,44.1,144.5,55.37872314453125C144.5,55.4,144.5,78,144.5,78.00674438476562C144.5,78,137.5,78,137.5,78.00674438476562C137.5,78,137.5,36.5,137.5,36.48233413696289C137.5,36.5,144.1,36.5,144.1,36.48233413696289C144.1,36.5,144.1,42.4,144.1,42.35768508911133C144.1,42.4,144.2,42.4,144.2,42.35768508911133C145.7,40.1,149.6,35.3,156.8,35.291385650634766C163.2,35.3,171.3,37.9,171.3,49.7415657043457C171.3,49.7,171.3,49.7,171.3,49.7415657043457M188.8,21.000001907348633C188.8,21,188.8,78,188.8,78.00674438476562C188.8,78,181.8,78,181.8,78.00674438476562C181.8,78,181.8,21,181.8,21.000001907348633C181.8,21,188.8,21,188.8,21.000001907348633M227.5,64.98570251464844C227.5,65,234.5,65,234.5,64.98570251464844C234.3,67,232.3,72.8,227.1,76.33941650390625C225.2,77.6,222.5,79.2,215.8,79.19769287109375C204.2,79.2,197.3,70.4,197.3,58.39579391479492C197.3,45.5,203.4,35.3,217.2,35.291385650634766C229.2,35.3,235,44.8,235,59.50734329223633C235,59.5,204.7,59.5,204.7,59.50734329223633C204.7,68.2,208.8,73.2,216.8,73.16355895996094C223.4,73.2,227.3,68.1,227.5,64.98570251464844C227.5,65,227.5,65,227.5,64.98570251464844M204.7,53.949581146240234C204.7,53.9,227.8,53.9,227.8,53.949581146240234C227.4,47.5,224.7,41.6,216.2,41.563716888427734C209.8,41.6,204.7,47.5,204.7,53.949581146240234C204.7,53.9,204.7,53.9,204.7,53.949581146240234M262.5,56.64906692504883C262.5,56.6,277.1,78,277.1,78.00674438476562C277.1,78,268.2,78,268.2,78.00674438476562C268.2,78,257.9,62.4,257.9,62.36561584472656C257.9,62.4,247.9,78,247.9,78.00674438476562C247.9,78,239.1,78,239.1,78.00674438476562C239.1,78,253.7,56.6,253.7,56.64906692504883C253.7,56.6,239.8,36.5,239.8,36.48233413696289C239.8,36.5,248.8,36.5,248.8,36.48233413696289C248.8,36.5,258.4,51.1,258.4,51.09130859375C258.4,51.1,268,36.5,268,36.48233413696289C268,36.5,276.6,36.5,276.6,36.48233413696289C276.6,36.5,262.5,56.6,262.5,56.64906692504883M289.3,49.10639190673828C289.3,49.1,282.8,49.1,282.8,49.10639190673828C283.2,39.2,289.7,35.3,300,35.291385650634766C303.3,35.3,315.4,36.2,315.4,46.88328552246094C315.4,46.9,315.4,70.8,315.4,70.78165435791016C315.4,72.5,316.3,73.2,317.7,73.24295043945312C318.3,73.2,319.2,73.1,320,72.92536163330078C320,72.9,320,78,320,78.00674438476562C318.8,78.3,317.8,78.8,316.2,78.80071258544922C310,78.8,309,75.6,308.8,72.44898986816406C306.1,75.4,301.9,79.2,293.8,79.19769287109375C286.2,79.2,280.8,74.4,280.8,67.20881652832031C280.8,63.7,281.8,55.6,293.4,54.18777084350586C293.4,54.2,304.9,52.8,304.9,52.758636474609375C306.6,52.6,308.6,52,308.6,47.83604431152344C308.6,43.5,305.4,41.1,298.8,41.087337493896484C290.9,41.1,289.7,45.9,289.3,49.10639190673828C289.3,49.1,289.3,49.1,289.3,49.10639190673828M308.4,63.635963439941406C308.4,63.6,308.4,56.8,308.4,56.807857513427734C307.3,57.7,305.5,58.3,296.9,59.42794418334961C293.5,59.9,288,60.9,288,66.1766586303711C288,70.7,290.3,73.4,295.5,73.40174102783203C302.1,73.4,308.4,69.2,308.4,63.635963439941406C308.4,63.6,308.4,63.6,308.4,63.635963439941406"
		/>
	</svg>
);