import Image from "next/image"
import LogoWhite from "../public/gallery-logo-dark.svg"
import LogoBlack from "../public/gallery-logo-light.svg"

const width = 200
const height = 100
const viewBox = `0 0 ${width} ${height}`
const Light = () => (
    <svg width={width - 60} height={height - 60} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M67.2791 73.05H53.1791C41.9291 73.05 32.7791 63.9 32.7791 52.5V20.55C32.7791 9.14999 23.4791 -7.15256e-06 12.2291 -7.15256e-06H2.6291C1.5791 -7.15256e-06 0.829102 0.899999 0.829102 1.94999V52.5C0.829102 81.45 24.2291 105 53.1791 105H67.2791C68.3291 105 69.2291 104.1 69.2291 103.05V75C69.2291 73.95 68.3291 73.05 67.2791 73.05ZM100.079 -7.15256e-06H90.4787C89.4287 -7.15256e-06 88.6787 0.899999 88.6787 1.94999V84.45C88.6787 95.85 97.8287 105 109.079 105H118.679C119.729 105 120.629 104.1 120.629 103.05V20.55C120.629 9.14999 111.329 -7.15256e-06 100.079 -7.15256e-06ZM140.2 20.55V84.6C140.2 95.85 149.35 105 160.6 105H224.5C235.9 105 245.05 95.85 245.05 84.6V20.55C245.05 9.3 235.9 -7.15256e-06 224.5 -7.15256e-06H160.6C149.35 -7.15256e-06 140.2 9.3 140.2 20.55ZM211.15 73.05H174.1C172.9 73.05 172.15 72.3 172.15 71.1V34.05C172.15 32.85 172.9 32.1 174.1 32.1H211.15C212.35 32.1 213.1 32.85 213.1 34.05V71.1C213.1 72.3 212.35 73.05 211.15 73.05Z" fill="black" />
    </svg>


)

const Dark = () => (
    <svg width={width - 60} height={height - 60} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M67.2791 73.05H53.1791C41.9291 73.05 32.7791 63.9 32.7791 52.5V20.55C32.7791 9.14999 23.4791 -7.15256e-06 12.2291 -7.15256e-06H2.6291C1.5791 -7.15256e-06 0.829102 0.899999 0.829102 1.94999V52.5C0.829102 81.45 24.2291 105 53.1791 105H67.2791C68.3291 105 69.2291 104.1 69.2291 103.05V75C69.2291 73.95 68.3291 73.05 67.2791 73.05ZM100.079 -7.15256e-06H90.4787C89.4287 -7.15256e-06 88.6787 0.899999 88.6787 1.94999V84.45C88.6787 95.85 97.8287 105 109.079 105H118.679C119.729 105 120.629 104.1 120.629 103.05V20.55C120.629 9.14999 111.329 -7.15256e-06 100.079 -7.15256e-06ZM140.2 20.55V84.6C140.2 95.85 149.35 105 160.6 105H224.5C235.9 105 245.05 95.85 245.05 84.6V20.55C245.05 9.3 235.9 -7.15256e-06 224.5 -7.15256e-06H160.6C149.35 -7.15256e-06 140.2 9.3 140.2 20.55ZM211.15 73.05H174.1C172.9 73.05 172.15 72.3 172.15 71.1V34.05C172.15 32.85 172.9 32.1 174.1 32.1H211.15C212.35 32.1 213.1 32.85 213.1 34.05V71.1C213.1 72.3 212.35 73.05 211.15 73.05Z" fill="white" />
    </svg>


)

const Logo = ({ dark }: { dark?: boolean }) => {
    const logo_size = 150;
    return (
        <Image
            src={`/logos/${dark ? 'dark' : 'light'}.svg`}
            width={logo_size}
            height={logo_size / 4}
            alt={"Lio's Gallery Logo"} />
    )
}


export default Logo