import React from 'react'
import { useTheme } from '../../themeContext'
import { HairProps } from './types'

export const Back = () => <></>

export const Front = ({ hairColor }: HairProps) => {
  const { colors, skin } = useTheme()

  const { base, shadow } = colors.hair[hairColor]

  return (
    <>
      <rect
        x="290.23"
        y="414.02"
        width="439.24"
        height="64.15"
        fill={skin.shadow}
      />
      <path
        d="M710,667.66q-4.71,5.82-9.71,11.37C697.79,681.8,702.87,677.91,710,667.66Zm15-316.55C694.5,296.7,641.5,259.24,580.22,242l-6.35-1.71c-22.7-6.28-46.62-7-71.32-7-26.69,0-52.46,2.74-76.77,10l-4.26,1.27C335.16,273.62,263.78,346.74,245.06,429.8,213,556.34,262.89,634,307.17,681.6c4.37,4.7-57.93-101.85-17.42-216,7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05C760.78,572,728.5,641.13,710,667.66A265.62,265.62,0,0,0,769.3,500C769.3,413.58,725,351.11,725,351.11Z"
        fill={base}
      />
      <path
        d="M325.14,464.92c.9-57.85,19.88-126.43,66.22-207.44h0q-4.07,1.88-8.06,3.88l-.59.29c-1.22.61-2.44,1.24-3.65,1.88l-1,.53q-5.64,3-11.13,6.23l-.9.53c-1.16.69-2.31,1.39-3.46,2.1l-.86.54q-5.37,3.35-10.56,6.93l-1.08.75c-1.08.76-2.16,1.52-3.23,2.29l-.65.47q-3.27,2.39-6.47,4.84l-.62.48c-1,.78-2,1.58-3,2.39l-1.18.94c-1,.81-2,1.62-3,2.45l0,0c-2.11,1.75-4.18,3.55-6.24,5.37l-1.14,1-2.69,2.45L320.53,305q-4.27,4-8.37,8.17l-1.37,1.41c-.8.82-1.59,1.64-2.37,2.47l-1.37,1.48Q305,320.77,303,323c-.46.51-.92,1-1.37,1.54-.71.81-1.41,1.63-2.11,2.45L298,328.8c-.68.81-1.36,1.62-2,2.44-.54.66-1.07,1.33-1.61,2-1.06,1.33-2.11,2.66-3.15,4-.55.7-1.09,1.4-1.62,2.11s-1.2,1.59-1.79,2.4l-1.59,2.18c-.56.78-1.13,1.55-1.68,2.33-.94,1.34-1.88,2.69-2.8,4.05-.5.73-1,1.48-1.48,2.22s-1.11,1.66-1.65,2.5-1,1.54-1.48,2.31-1.13,1.8-1.69,2.71c-.43.69-.86,1.38-1.28,2.07q-1.32,2.19-2.6,4.4c-.42.72-.82,1.44-1.23,2.16-.54.95-1.08,1.91-1.61,2.87-.4.73-.8,1.46-1.19,2.19-.64,1.19-1.27,2.39-1.89,3.59-.41.78-.81,1.56-1.21,2.34-.64,1.28-1.28,2.55-1.9,3.84-.34.69-.67,1.39-1,2.09-.52,1.09-1,2.19-1.54,3.29l-.91,2q-1.11,2.47-2.17,5c-.22.52-.43,1.05-.65,1.57-.53,1.27-1,2.54-1.56,3.82-.27.67-.53,1.34-.79,2-.49,1.26-1,2.53-1.45,3.8l-.61,1.65q-1,2.63-1.86,5.26l-.56,1.7q-.66,2-1.29,4c-.2.63-.4,1.27-.59,1.91q-.72,2.31-1.38,4.63c-.1.33-.2.66-.29,1q-.78,2.76-1.5,5.54l-.45,1.78c-.19.74-.37,1.49-.55,2.24-1.56,6.69-2.88,13.23-4,19.63-.1.66-.22,1.31-.32,2l-.24,1.52q-.45,2.93-.82,5.88c-.06.43-.11.87-.16,1.3-.2,1.59-.38,3.19-.55,4.79l-.18,1.81c-.17,1.68-.32,3.37-.45,5.06l-.09,1q-.23,3-.38,6.05c0,.53-.05,1.07-.08,1.6q-.11,2.36-.18,4.71c0,.59,0,1.18-.05,1.77,0,2.05-.07,4.11-.07,6.17v.1c0,2.22,0,4.42.08,6.62,0,.76.06,1.52.08,2.28.05,1.47.1,2.94.17,4.41.05.89.11,1.77.16,2.66.08,1.33.16,2.66.25,4l.24,2.83c.11,1.26.21,2.52.34,3.77.09,1,.21,1.94.31,2.91.14,1.21.27,2.43.42,3.64.12,1,.26,2,.39,2.95.16,1.18.33,2.37.5,3.55.15,1,.31,2,.47,3,.19,1.16.37,2.33.58,3.49.17,1,.35,2,.54,3,.21,1.15.43,2.3.66,3.44s.4,2,.61,3c.24,1.14.48,2.27.74,3.4s.45,2,.68,2.93c.27,1.13.54,2.25.82,3.36s.49,1.95.75,2.92.59,2.22.9,3.33c.26,1,.53,1.92.81,2.87.32,1.11.65,2.21,1,3.31s.57,1.89.87,2.84.71,2.19,1.07,3.28c.31.93.61,1.87.93,2.8.38,1.09.76,2.18,1.15,3.27l1,2.74c.41,1.09.83,2.18,1.25,3.27.34.89.68,1.79,1,2.68.44,1.09.89,2.19,1.34,3.28.36.86.71,1.73,1.08,2.59.48,1.12,1,2.22,1.46,3.33.36.83.72,1.65,1.09,2.47.52,1.16,1.07,2.3,1.61,3.44.36.77.71,1.54,1.08,2.3.6,1.26,1.23,2.5,1.86,3.75l.95,1.9q2.88,5.61,6,11.07c.36.62.73,1.23,1.09,1.84.7,1.2,1.39,2.4,2.11,3.58.44.72.89,1.42,1.33,2.14.66,1.07,1.32,2.14,2,3.19.48.76,1,1.5,1.47,2.24.65,1,1.31,2,2,3,.51.76,1,1.52,1.56,2.28.66,1,1.32,1.92,2,2.88.54.77,1.1,1.53,1.65,2.3s1.34,1.85,2,2.77,1.15,1.53,1.72,2.29l2.07,2.7c.59.76,1.19,1.51,1.79,2.26s1.41,1.76,2.12,2.63,1.23,1.49,1.85,2.23,1.44,1.72,2.17,2.57l1.91,2.2,2.22,2.5c.65.73,1.31,1.44,2,2.16.4.44.81.87,1.22,1.31,2.37,1.37-57.48-103.69-17.57-216.15C297.34,465.29,309.57,465.08,325.14,464.92Z"
        fill={shadow}
      />
      <path
        d="M420.82,134.59A71.58,71.58,0,0,1,433,112.84c1.37-1.59,2.72-3.21,4.16-4.74s3-3,4.53-4.41,3.21-2.73,4.88-4,3.41-2.5,5.17-3.65,3.6-2.21,5.47-3.19l2.82-1.43a31,31,0,0,1,2.86-1.35c2-.76,3.89-1.62,5.89-2.29s4-1.32,6-1.81a72,72,0,0,1,24.86-2,112.32,112.32,0,0,0-24,5c-1,.26-1.9.7-2.85,1l-2.85,1c-1.88.73-3.69,1.65-5.54,2.45s-3.58,1.85-5.38,2.77-3.44,2.09-5.17,3.12-3.33,2.28-5,3.41-3.15,2.52-4.76,3.75-3,2.68-4.53,4l-4.28,4.31A110.47,110.47,0,0,0,420.82,134.59Z"
        fill={colors.white}
      />
      <path
        d="M520.11,249.17a367.15,367.15,0,0,0-42.48,4.93c-3.49.68-7,1.42-10.44,2.06s-6.9,1.61-10.35,2.41l-10.27,2.72c-3.39,1-6.76,2.08-10.14,3.11A312.8,312.8,0,0,0,397,280.14a347.55,347.55,0,0,0-37.25,21A183.48,183.48,0,0,1,394.83,276a218.27,218.27,0,0,1,39.76-17.3c3.47-1,6.93-2.08,10.42-3.05s7-1.82,10.54-2.59,7.1-1.41,10.66-2,7.15-1.08,10.74-1.52A189.39,189.39,0,0,1,520.11,249.17Z"
        fill={colors.white}
      />
      <path
        d="M529.83,233.83a70.16,70.16,0,0,1,15.44-1.92c2.56-.06,5.11,0,7.67.13s5.12.3,7.68.52a138.69,138.69,0,0,1,15.35,2.2A95.37,95.37,0,0,1,591.05,239l-3.89,11.35c-4.62-1.38-9.25-2.78-13.95-4.07s-9.45-2.51-14.25-3.71l-7.25-1.76c-2.43-.57-4.87-1.15-7.3-1.81A85.14,85.14,0,0,1,529.83,233.83Z"
        fill={colors.outline}
      />
      <path
        d="M710,667.66q-4.71,5.82-9.71,11.37C697.79,681.8,702.87,677.91,710,667.66Zm15-316.55C694.5,296.7,641.5,259.24,580.22,242l-6.35-1.71c-22.7-6.28-46.62-7-71.32-7-26.69,0-52.46,2.74-76.77,10l-4.26,1.27C335.16,273.62,263.78,346.74,245.06,429.8,213,556.34,262.89,634,307.17,681.6c4.37,4.7-57.93-101.85-17.42-216,7.73-.29,20.24-.51,36.19-.67l15.5-50.61,17.44,50.38c27.4-.13,59.88-.15,93.88-.12l12.32-52.36L479,464.6c74.37.14,151.44.52,195.28.77l13.2-52.17,15,52.33,8.21.05C760.78,572,728.5,641.13,710,667.66A265.62,265.62,0,0,0,769.3,500C769.3,413.58,725,351.11,725,351.11Z"
        fill="none"
        stroke={colors.outline}
        strokeMiterlimit={10}
        strokeWidth="12px"
      />
      <path
        d="M284.48,462.85c.18-.75.33-1.32.53-1.94s.4-1.2.62-1.78c.46-1.17,1-2.31,1.51-3.42a48.48,48.48,0,0,1,3.85-6.42,37.51,37.51,0,0,1,4.88-5.75,17,17,0,0,1,7-4,31,31,0,0,1-.87,7.68c-.28,1.14-.59,2.25-.93,3.32l-1,3.25q-1,3.23-2,6.39c-.33,1.06-.68,2.09-1,3.13-.17.51-.37,1-.56,1.53s-.39,1-.56,1.4Z"
        fill={colors.outline}
      />
      <path
        d="M710.68,459.58a35,35,0,0,1,6.23.06,60.73,60.73,0,0,1,6.24.86c1,.2,2.08.4,3.12.64a25.74,25.74,0,0,1,3.11.86,18.53,18.53,0,0,1,6.24,3.58,18.74,18.74,0,0,1-6.24,3.59,25.68,25.68,0,0,1-3.11.85c-1,.25-2.08.45-3.12.65q-3.12.58-6.24.86a35,35,0,0,1-6.23.05Z"
        fill={colors.outline}
      />
      <path
        d="M444.84,452.07a132.29,132.29,0,0,1,1.49-14.25c.72-4.7,1.6-9.37,2.61-14s2.15-9.25,3.44-13.83A132.09,132.09,0,0,1,457,396.4a131.77,131.77,0,0,1-1.5,14.25q-1.08,7.05-2.61,14t-3.44,13.83A137,137,0,0,1,444.84,452.07Z"
        fill={colors.white}
      />
      <path
        d="M668,452.07a134.88,134.88,0,0,1,1.49-14.25q1.09-7.05,2.61-14T675.49,410a132.09,132.09,0,0,1,4.57-13.58,131.76,131.76,0,0,1-1.49,14.25q-1.1,7.05-2.61,14c-1,4.64-2.16,9.25-3.45,13.83A134.48,134.48,0,0,1,668,452.07Z"
        fill={colors.white}
      />
    </>
  )
}
