import Link from 'next/link'
import clsx from 'clsx'

export function WindowsLink({
  color = 'black',
}: {
  color?: 'black' | 'white'
}) {
  return (
    <Link
      href="https://github.com/threefoldtech/myceliumflut/releases"
      aria-label="Download for Windows"
      className={clsx(
        'flex items-center rounded-lg px-4 py-2 transition-all hover:scale-105',
        color === 'black'
          ? 'bg-gray-800 text-white hover:bg-gray-900'
          : 'bg-white text-gray-900 hover:bg-gray-50',
      )}
    >
      {/* Windows logo */}
      <svg
        viewBox="0 0 88 88"
        aria-hidden="true"
        className="h-5 w-5 mr-3"
      >
        <path
          fill="currentColor"
          d="M0 12.2L35.6 7v34.2H0V12.2Zm0 63.6L35.6 76V44.8H0v31ZM41.2 6l46.8-6v41.2H41.2V6Zm0 76l46.8 6V46.8H41.2V82Z"
        />
      </svg>

      {/* Text */}
      <div className="flex flex-col text-left leading-tight">
        <span className="text-[9px] mt-0">Download for</span>
        <span className="text-sm font-semibold -mt-1.5">Windows</span>
      </div>
    </Link>
  )
}
