import {Link} from 'react-router';
import {useAbiirWishlistCount} from '~/hooks/useAbiirWishlistCount';

/**
 * Account overview tile: localStorage wishlist count (client), links to /wishlist.
 */
export function AccountWishlistStat() {
  const n = useAbiirWishlistCount();
  return (
    <li className="border border-[rgba(26,26,26,0.1)] bg-[#faf8f3] px-4 py-4 text-center sm:text-left">
      <Link
        className="block text-inherit no-underline transition-opacity hover:opacity-85"
        to="/wishlist"
      >
        <p className="m-0 font-['Raleway',sans-serif] text-xs uppercase tracking-[0.12em] text-[#5a5550]">
          Wishlist
        </p>
        <p className="mt-1 font-['Raleway',sans-serif] text-xl font-medium text-[#1a1a18]">
          {n > 0 ? n : '—'}
        </p>
        {n > 0 ?
          <p className="m-0 mt-1 font-['Raleway',sans-serif] text-xs font-medium text-[#5d0b24]">
            View list
          </p>
        : null}
      </Link>
    </li>
  );
}