import { cn } from '../../../../utils'

export function MenuButton(
  props: React.DOMAttributes<SVGElement> & { className?: string },
) {
  return (
    <svg
      width="12"
      height="12"
      viewBox="0 0 12 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      className={cn(props.className, 'cursor-pointer')}
    >
      <path
        d="M11.5 11H0.5M0.5 1H11.5M0.5 6H11.5"
        stroke="var(--tertiary-foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}

export function BackButton(
  props: React.DOMAttributes<SVGElement> & { className?: string },
) {
  return (
    <svg
      width="16"
      height="24"
      viewBox="0 0 16 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      className={cn(props.className, 'cursor-pointer')}
    >
      <path
        d="M11.666 19L4.66602 12L11.666 5"
        stroke="var(--muted-more-foreground)"
      />
    </svg>
  )
}

export function CloseButton(
  props: React.DOMAttributes<SVGElement> & { className?: string },
) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
      className={cn('cursor-pointer', props.className)}
    >
      <path
        d="M14.6668 1.33325L1.3335 14.6666M1.3335 1.33325L14.6668 14.6666"
        stroke="var(--muted-more-foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}

export function ArrowRight() {
  return (
    <svg
      className="cursor-pointer"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5.25 2.75L10.5 8L5.25 13.25"
        stroke="var(--platform-navigation-muted-more-foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}

export function ArrowDown() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M13.25 5.25L8 10.5L2.75 5.25"
        stroke="var(--platform-navigation-muted-more-foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}

export function ArrowUp() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M2.75 10.75L8 5.5L13.25 10.75"
        stroke="var(--platform-navigation-muted-more-foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}

export function SystemMode() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
    >
      <path
        d="M1.16663 1.16666H12.8333V12.8333H1.16663V1.16666Z"
        stroke="var(--foreground)"
        strokeWidth="1.5"
      />
      <path
        d="M3.49996 8.16666H10.5V10.5H3.49996V8.16666Z"
        stroke="var(--foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}

export function LightMode() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
    >
      <path
        d="M7 0V1.75M7 12.25V14M11.9499 2.05021L10.7125 3.28765M3.28793 10.7122L2.0505 11.9496M14 7H12.25M1.75 7H0M11.9499 11.9496L10.7125 10.7122M3.28793 3.28765L2.0505 2.05021M3.5 7C3.5 7.92826 3.86875 8.8185 4.52513 9.47487C5.1815 10.1313 6.07174 10.5 7 10.5C7.92826 10.5 8.8185 10.1313 9.47487 9.47487C10.1313 8.8185 10.5 7.92826 10.5 7C10.5 6.07174 10.1313 5.1815 9.47487 4.52513C8.8185 3.86875 7.92826 3.5 7 3.5C6.07174 3.5 5.1815 3.86875 4.52513 4.52513C3.86875 5.1815 3.5 6.07174 3.5 7Z"
        stroke="var(--foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}
export function DarkMode() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="15"
      height="15"
      viewBox="0 0 15 15"
      fill="none"
    >
      <path
        d="M13.0539 9.24559C12.6299 9.33846 12.1894 9.3874 11.7375 9.3874C8.35473 9.3874 5.61247 6.64517 5.61247 3.26242C5.61247 2.81049 5.66141 2.36998 5.7543 1.94592C3.00427 2.54826 0.945801 4.99828 0.945801 7.92907C0.945801 11.3118 3.68806 14.0541 7.07081 14.0541C10.0016 14.0541 12.4517 11.9956 13.0539 9.24559Z"
        stroke="var(--foreground)"
        strokeWidth="1.5"
      />
    </svg>
  )
}