import Link from "next/link";

export function HeadphonesIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24">
      <path d="M4 14v-2a8 8 0 0 1 16 0v2" />
      <path d="M18 19h1a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-1v5ZM6 19H5a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2h1v5Z" />
      <path d="M18 19c0 1.1-.9 2-2 2h-3" />
    </svg>
  );
}

export function SearchIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-4-4" />
    </svg>
  );
}

export function UploadIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24">
      <path d="M12 16V4m0 0L7 9m5-5 5 5" />
      <path d="M5 14v5h14v-5" />
    </svg>
  );
}

export function BookIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 64 64">
      <path d="M13 10h27c6 0 11 5 11 11v33H24c-6 0-11-5-11-11V10Z" />
      <path d="M51 54H24c-4 0-7-3-7-7s3-7 7-7h27M24 10v30" />
      <path d="M32 19h11M32 26h8" />
    </svg>
  );
}

export function ArrowLeftIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24">
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

export function AppBrand() {
  return (
    <Link className="brand" href="/" aria-label="听阅首页">
      <span className="brand-mark"><HeadphonesIcon /></span>
      <span>
        <strong>听阅</strong>
        <small>HearBooks</small>
      </span>
    </Link>
  );
}
