import { cn } from "@/lib/utils";
import { type } from "@/lib/typography";
import Image from "next/image";
import Link from "next/link";
import { Separator } from "./ui/separator";

import React from 'react';

interface LogoProps {
  color?: string; // رنگ لوگو به صورت پیش‌فرض سفید است
  className?: string; // برای اضافه کردن کلاس‌های اضافی در صورت نیاز
}

export const LogoType: React.FC<LogoProps> = ({
  color = '#FFFFFF',
  className = 'w-12'
}) => {
  return (
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      viewBox="0 0 69.9 34.2"
      xmlSpace="preserve"
      className={cn(className, 'fill-primary dark:fill-foreground')}
    >
      <path
        d="M63.5,9.2c-1.2,0-2.5-0.1-3.8-0.1c-2.2,0.3-3.5,2-4,4c0,0.1,0,0.2-0.1,0.3c-0.3,1-0.5,2-0.8,3.1
        c-6.4,0.3-6.5-0.8-6.1-2.4c0-0.1,0.1-0.2,0.1-0.3c0.4-1.6,0.3-1.3,0.5-2.3c0.1-0.2,0.1-0.5,0.1-0.7c0-0.8-0.1-1.4-0.5-2
        c-0.4-0.5-0.9-1-1.6-1.3c-1-0.5-1.5-0.3-1.7,0.8c0,0.2-0.1,0.4-0.1,0.7C45.1,10.4,44,15,44,15c-0.4,1.3-0.8,1.5-2.6,1.5
        c-1.2,0-5.3,0-5.3,0c-1.5-0.2-2.2-0.9-1.9-2.4c0-0.1,0.1-0.2,0.1-0.3c0.4-1.6,0.3-1.3,0.5-2.3c0.1-0.2,0.1-0.5,0.1-0.7
        c0-0.8-0.1-1.4-0.5-2c-0.4-0.5-0.9-1-1.6-1.3c-1-0.5-1.5-0.3-1.7,0.8c0,0.2-0.1,0.4-0.1,0.7c-0.3,1.5-1.4,6.1-1.4,6.1
        c-0.4,1.3-0.8,1.5-2.6,1.5c-3.4-0.1-17.9,0.1-21.2,0c-2.5-0.1-3.3,1.4-3.7,2.9l-0.5,1.8c4.6,0.1,27.4,0,27.5,0
        c0.5,0,0.9-0.1,1.3-0.3c0.7-0.2,1.2-0.6,1.7-1.1c0.6,0.6,1.4,1,2.3,1.2c0.1,0,9.1,0.1,9.2,0.1c1.2-0.1,2.2-0.6,2.9-1.3
        c0.7,0.7,1.6,1.1,2.7,1.2c0,0,13.7,0.2,13.9,0.2c1.7-0.1,2.5-1.1,3.1-3c0.1-0.5,0.3-0.9,0.4-1.3c0.3-1,0.6-1.9,0.8-2.9
        c0-0.1,0-0.2,0-0.2C67.9,11.1,66.4,9.3,63.5,9.2z M63,14.2c-0.6,2.4-0.3,2.4-2.6,2.3c-0.2,0-0.2,0-0.5,0c-0.8,0-0.6-0.6-0.6-0.8
        c0.4-1.9,0.8-2.2,2.7-2.2c0.3,0,1.1,0,1.1,0S63.1,13.9,63,14.2z"
      />
      <g>
        <path
          d="M17.9,24.3c-2.9,0-5,0-7.6,0c-2.6,0-2.9,1.5-3.3,2.6l-0.6,1.7c2.7,0,5.5,0,8.2,0c0.7,0,1.4,0,2.2,0
          c0.6,0,0.9,0.2,0.7,0.8l-1.1,3.3c0.5,0,1.5,0,2,0c2.2,0,2.6-1,3.2-3.1C23.2,25.3,20.9,24.2,17.9,24.3z"
        />
      </g>
      <path
        d="M64,5.9l-2.7-0.2c-0.5-0.1-0.8-0.6-0.7-1.1l0.6-2.4c0.1-0.5,0.6-0.8,1.1-0.7l2.7,0.2c0.5,0.1,0.8,0.6,0.7,1.1
        l-0.6,2.4C65,5.7,64.5,6,64,5.9z"
      />
      <g>
        <path
          d="M42.1,24.7c-0.9,0-5.7,0-8.3,0c-1.8,0-1.9,1.3-1.9,1.3l-0.7,3.2l7.8,0c2.3,0,4-1.1,4.3-3.4
          C43.3,25.1,43,24.7,42.1,24.7z"
        />
      </g>
    </svg>
  );
};

export const Logo = ({
  className,
  uniColor,
  hasCaption
}: {
  className?: string;
  uniColor?: boolean;
  hasCaption?: boolean;
}) => {
  const _feep = <span className={cn(type.h4, "font-bold leading-tight")}><LogoType /></span>
  return (
    <Link href="/" className={`flex items-center ${hasCaption ? 'flex-col' : 'gap-2'}`}>
      <LogoIcon className={cn(className, 'h-7 text-primary')} uniColor={uniColor} />
      {hasCaption ?
        <span className="flex flex-col items-center">
          {_feep}
          <span className={cn(type.caption, "font-normal leading-tight")}>
            داده‌ها فهمیده می‌شوند
          </span>
          <Separator className="mt-2 max-w-10" />
        </span>
        : _feep}
    </Link>
  );
};

interface LogoIconProps {
  color?: string;
  className?: string;
}

export const LogoIcon: React.FC<LogoIconProps> = ({
  color = '#FFFFFF',
  className = 'h-5 w-auto md:h-12 dark:invert fill-primary'
}) => {
  return (
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      viewBox="0 0 34.2 34.2"
      xmlSpace="preserve"
      className={cn(className, 'fill-primary dark:fill-foreground')}
    >
      <g>
        <path
          // fill={color}
          d="M25.2,3.3l-0.5,1.8c-0.4,1.6-1.2,2.8-3.7,2.8c-3.4,0-4.6,0-8,0.1c-2,0-2.3,0.3-2.7,2.2c0,0.2-0.2,0.9,1.2,0.9
          c4.7,0,9.7,0,14.4,0c3,0,4.6,1.9,4,4.8c-0.3,1.4-0.6,2.7-1.1,4.3c-0.6,2.1-1.4,3.1-3.7,3.1c-2.9,0-5.3,0-8.1,0
          c-0.9,0-1.4,0.3-1.6,1.3c-0.4,2.2-1,4.4-1.4,6.7c-0.2,0.9-0.6,1-1.3,0.8c-2.2-0.7-2.9-2.6-2.4-4.9c0.5-2.3,1.1-4.6,1.5-6.9
          c0.2-1.1,0.7-1.6,1.9-1.6c3.3,0.1,6,0.1,9.3,0.1c2.3,0,2,0,2.6-2.4c0.1-0.6-0.1-0.8-0.7-0.8c-0.7,0-1.4,0-2.2,0c-4,0-8,0-12.1,0
          c-1.1,0-1.5,0.4-1.7,1.4c-0.3,1.7-0.7,3.4-1,5.1c-0.2,1.1-0.7,1.3-1.7,0.8c-1.7-0.8-2.5-2.1-2.1-4C4.9,15,5.7,11.2,6.6,7.4
          c0.5-2.1,1.9-4,4.3-4.1C11,3.3,20.6,3.3,25.2,3.3z"
        />
      </g>
    </svg >
  );
};

export const LogoStroke = ({ className }: { className?: string }) => {
  return (
    <svg
      className={cn("size-7 w-7", className)}
      viewBox="0 0 71 25"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M61.25 1.625L70.75 1.5625C70.75 4.77083 70.25 7.79167 69.25 10.625C68.2917 13.4583 66.8958 15.9583 65.0625 18.125C63.2708 20.25 61.125 21.9375 58.625 23.1875C56.1667 24.3958 53.4583 25 50.5 25C46.875 25 43.6667 24.2708 40.875 22.8125C38.125 21.3542 35.125 19.2083 31.875 16.375C29.75 14.4167 27.7917 12.8958 26 11.8125C24.2083 10.7292 22.2708 10.1875 20.1875 10.1875C18.0625 10.1875 16.25 10.7083 14.75 11.75C13.25 12.75 12.0833 14.1875 11.25 16.0625C10.4583 17.9375 10.0625 20.1875 10.0625 22.8125L0 22.9375C0 19.6875 0.479167 16.6667 1.4375 13.875C2.4375 11.0833 3.83333 8.64583 5.625 6.5625C7.41667 4.47917 9.54167 2.875 12 1.75C14.5 0.583333 17.2292 0 20.1875 0C23.8542 0 27.1042 0.770833 29.9375 2.3125C32.8125 3.85417 35.7708 5.97917 38.8125 8.6875C41.1042 10.7708 43.1042 12.3333 44.8125 13.375C46.5625 14.375 48.4583 14.875 50.5 14.875C52.6667 14.875 54.5417 14.3125 56.125 13.1875C57.75 12.0625 59 10.5 59.875 8.5C60.7917 6.5 61.25 4.20833 61.25 1.625Z"
        fill="none"
        strokeWidth={0.5}
        stroke="currentColor"
      />
    </svg>
  );
};