import { Link } from "react-router-dom";
import { Scissors } from "./icons";

export function Logo({ onClick }: { onClick?: () => void }) {
  return (
    <Link
      to="/"
      onClick={onClick}
      className="focusable inline-flex items-center gap-2 rounded-lg"
    >
      <span className="grid h-7 w-7 place-items-center rounded-lg bg-[var(--ink)] text-[var(--bg)]">
        <Scissors size={15} />
      </span>
      <span className="text-[16px] font-semibold tracking-[-0.02em] text-ink">
        snip
      </span>
    </Link>
  );
}