'use client';

import { cn } from '@workspace/ui/lib/utils';
import { motion, type SVGMotionProps } from 'motion/react';

const pathVariants = {
  hidden: {
    pathLength: 0,
    fillOpacity: 0,
  },
  visible: {
    pathLength: 1,
    fillOpacity: 1,
    transition: {
      duration: 2,
      ease: 'easeInOut',
    },
  },
} as const;

const sizes = {
  sm: {
    svg: 'h-6',
    betaTag: 'bottom-[2px] left-[calc(100%+6px)] px-1.5 py-0.5 text-[9px]',
  },
  lg: {
    svg: 'h-12',
    betaTag: 'bottom-[4px] left-[calc(100%+10px)] px-2 py-0.5 text-base',
  },
  xl: {
    svg: 'h-14',
    betaTag: 'bottom-[7px] left-[calc(100%+15px)] px-2.5 py-1 text-base',
  },
};

export const Logo = ({
  betaTag = false,
  draw = false,
  size = 'sm',
  className,
  containerClassName,
  ...props
}: {
  containerClassName?: string;
  betaTag?: boolean;
  draw?: boolean;
  size?: keyof typeof sizes;
} & SVGMotionProps<SVGSVGElement>) => {
  return (
    <div className={cn('relative', containerClassName)}>
      <motion.svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 4899.14 783.54"
        className={cn(sizes[size].svg, className)}
        {...props}
      >
        <motion.path
          variants={draw ? pathVariants : {}}
          initial={draw ? 'hidden' : false}
          animate={draw ? 'visible' : false}
          stroke="currentColor"
          strokeWidth={4}
          className="fill-neutral-900 dark:fill-neutral-100"
          d="M612.79 783.54H227.43c-41.6 0-82.15-11.19-117.26-32.37-32.96-19.88-60.58-48.18-79.88-81.85C10.99 635.66.52 597.52.02 559.03c-.54-41 10.29-81.64 31.32-117.54l192.67-329.07c20.81-35.55 50.62-64.69 86.19-84.28C343.64 9.73 381.64 0 420.11 0s76.47 9.73 109.9 28.14c35.57 19.59 65.38 48.73 86.19 84.28l192.68 329.07c21.02 35.9 31.85 76.55 31.31 117.54-.5 38.49-10.97 76.62-30.27 110.29s-46.92 61.97-79.88 81.85c-35.11 21.18-75.65 32.37-117.26 32.37ZM396.6 213.47 203.92 542.54c-6.59 11.26-3.71 21.06-.13 27.31s10.59 13.69 23.63 13.69h385.36c13.04 0 20.05-7.45 23.63-13.69 3.58-6.25 6.46-16.05-.12-27.31L443.61 213.47c-6.52-11.14-16.38-13.47-23.5-13.47s-16.98 2.34-23.5 13.47ZM1574.55 673.25h112.71l-218.43-546.46h-87.06l-220.76 546.46h111.94l38.89-101.83h224.17zM1345.68 482.8l78.75-206.19 78.04 206.19zM2067.37 364.26c-12.44-22.02-29.42-39.9-50.91-53.64-21.51-13.73-46.25-20.6-74.24-20.6s-54.02 6.22-76.57 18.66c-12.2 6.73-22.94 14.88-32.26 24.42v-35.3h-101.83v375.45h101.83V457.93c0-14.5 3.23-27.59 9.72-39.25q9.705-17.49 26.82-26.82c11.39-6.22 24.35-9.33 38.87-9.33 21.77 0 39.64 7 53.64 20.99s20.99 32.14 20.99 54.41v215.32h102.61V434.61c0-24.88-6.22-48.32-18.66-70.35ZM2204.18 237.17c-16.59 0-30.32-5.56-41.2-16.71-10.88-11.14-16.32-25-16.32-41.59s5.44-29.79 16.32-41.2c10.88-11.39 24.61-17.1 41.2-17.1s30.96 5.71 41.59 17.1c10.62 11.41 15.93 25.14 15.93 41.2s-5.32 30.45-15.93 41.59c-10.63 11.15-24.49 16.71-41.59 16.71m-52.08 436.08V297.8h103.38v375.45zM2902.6 357.65c-13.21-21.77-30.97-38.48-53.25-50.14-22.29-11.66-47.42-17.49-75.4-17.49s-53.38 6.1-76.18 18.27c-18.12 9.68-33.52 22.38-46.24 38.11-11.59-16.2-26.23-29.17-43.93-38.88q-31.875-17.49-70.74-17.49c-27.47 0-52.08 5.83-73.85 17.49-11.67 6.25-22.03 13.9-31.09 22.91V297.8h-101.83v375.45h101.83V452.49c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.03-18.27 25.65-23.71s22.66-8.16 36.15-8.16c20.21 0 37.04 6.1 50.53 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h102.61V452.5c0-15.02 3.23-27.72 9.72-38.09 6.47-10.36 15.02-18.27 25.65-23.71 10.62-5.44 22.93-8.16 36.92-8.16 19.69 0 36.27 6.1 49.75 18.27 13.47 12.18 20.21 29.15 20.21 50.92v221.54h103.38V436.18c0-30.57-6.61-56.75-19.82-78.51ZM3253.56 297.8v35.43c-10.39-10.75-22.56-19.72-36.54-26.88-21.25-10.88-45.08-16.32-71.51-16.32-34.73 0-65.69 8.55-92.89 25.65-27.21 17.1-48.58 40.42-64.13 69.96s-23.32 62.96-23.32 100.28 7.77 69.96 23.32 99.5 36.92 52.86 64.13 69.96 57.91 25.65 92.11 25.65c26.94 0 51.17-5.44 72.68-16.32 13.89-7.03 25.93-15.85 36.15-26.45v35h102.61V297.81h-102.61Zm-20.21 260.4c-17.62 19.18-40.69 28.76-69.18 28.76-18.15 0-34.47-4.4-48.97-13.21-14.51-8.81-25.79-20.72-33.81-35.76-8.04-15.02-12.05-32.65-12.05-52.86s4.01-37.04 12.05-52.08c8.03-15.02 19.17-26.94 33.43-35.76 14.25-8.81 30.71-13.21 49.36-13.21s35.76 4.28 49.75 12.83 25.13 20.6 33.43 36.15c8.28 15.55 12.44 33.17 12.44 52.86 0 29.03-8.82 53.13-26.43 72.29ZM3674.09 297.8h-87.84V141.55h-101.83V297.8h-87.84v89.39h87.84v286.06h101.83V387.19h87.84zM4049.53 380.2c-15.55-28.49-37.31-50.78-65.3-66.85-27.98-16.06-59.6-24.1-94.83-24.1-37.31 0-71 8.55-101.05 25.65q-45.09 25.65-71.13 69.96c-17.37 29.54-26.04 62.96-26.04 100.28s8.81 71.51 26.43 101.05c17.61 29.54 41.84 52.86 72.68 69.96q46.245 25.65 105.33 25.65c30.57 0 58.81-5.44 84.73-16.32 25.91-10.88 48.45-27.21 67.63-48.97l-60.63-60.63c-11.4 13.48-24.87 23.32-40.42 29.54s-32.92 9.33-52.08 9.33c-21.25 0-39.91-4.4-55.97-13.21-16.07-8.81-28.37-21.63-36.92-38.48-3.4-6.69-6.11-13.85-8.15-21.48l274.39-.67c2.06-8.28 3.36-15.93 3.89-22.93.51-7 .78-13.86.78-20.6 0-36.27-7.77-68.66-23.32-97.17Zm-213.76 7.77c15.02-8.81 32.65-13.21 52.86-13.21 19.17 0 35.24 3.89 48.2 11.66 12.95 7.77 23.05 19.18 30.32 34.2 3.49 7.23 6.19 15.32 8.12 24.23l-181.45.52c1.88-6.99 4.34-13.56 7.37-19.7 8.03-16.32 19.55-28.88 34.59-37.7ZM4484.04 681.8c-43.02 0-81.36-9.58-115.05-28.76-33.69-19.17-60.24-45.34-79.68-78.51-19.43-33.16-29.15-70.74-29.15-112.71V126.78h106.49v338.14c0 24.36 5.17 45.35 15.55 62.96 10.36 17.62 24.35 31.23 41.98 40.81 17.61 9.59 37.57 14.38 59.85 14.38s41.84-4.79 58.69-14.38c16.83-9.58 30.32-23.19 40.42-40.81 10.1-17.61 15.16-38.34 15.16-62.19V126.78h106.5v335.81c0 41.98-9.46 79.42-28.37 112.33q-28.38 49.38-78.12 78.12c-33.17 19.18-71.26 28.76-114.27 28.76M4793.42 673.25V126.78h105.72v546.46h-105.72Z"
        ></motion.path>
      </motion.svg>

      {betaTag && (
        <motion.div
          className={cn(
            sizes[size].betaTag,
            'absolute bg-neutral-200 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full',
          )}
          initial={draw ? { opacity: 0 } : undefined}
          animate={draw ? { opacity: 1 } : undefined}
          transition={{ duration: 4, ease: 'easeInOut' }}
        >
          Beta
        </motion.div>
      )}

      <span className="sr-only">Animate UI</span>
    </div>
  );
};