import styles from "./index.module.scss";
import {Link} from "@/lib/i18n/navigation";

export default async function SloganThree() {
  return (
     <div className={styles.container}>
      <div className={styles.buttonBox}>
        <div className={styles.overlay}></div>
        <Link href="/" className={styles.buttonContent}>
        <div className={styles.icon}>
          <svg width="29" height="12" viewBox="0 0 29 12">
            <path fill="" fill-rule="nonzero" d="M28.768 5.427L23.71.237a.777.777 0 0 0-1.118 0 .826.826 0 0 0 0 1.147l3.71 3.805H.79A.8.8 0 0 0 0 6a.8.8 0 0 0 .79.81h25.511l-3.71 3.806a.826.826 0 0 0 0 1.147.778.778 0 0 0 1.119 0l5.058-5.19a.826.826 0 0 0 0-1.146z"></path>
          </svg>
        </div>
        <span className={styles.buttonText}>Read More</span>
        </Link>
      </div>
     </div>
  );
}

.container {
  padding: 80px 20px;
  width: 100%;
  margin: 0 auto;
  max-width: var(--max-width);

  .buttonBox {
    border: 1px solid #000;
    display: inline-block;
    font-size: var(--font-lg);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border-left: 0;
    padding: 10px 15px;
    transition: all .2s ease-in-out;

    &::before {
      content: "";
      display: block;
      height: 30%;
      border-left: 1px solid #000;
      position: absolute;
      left: 0;
      top: 0;
    }

    &::after {
      content: "";
      display: block;
      height: 30%;
      border-left: 1px solid #000;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    &:hover {
      padding: 10px 30px;

      .overlay {
        right: 0;
      }

      .buttonContent {
        .icon {
          svg {
            fill: #fff;
          }
        }

        .buttonText {
          color: #fff;
        }
      }
    }

    .overlay {
      z-index: 1;
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 100%;
      background-color: #000;
      transition: all .2s ease-in-out;
    }

    .buttonContent {
      position: relative;
      z-index: 2;
      width: 100%;
      display: flex;
      gap: 20px;
      padding: 15px;
      letter-spacing: .05em;

      .icon {
        display: flex;
        align-items: center;

        svg {
          fill: #000;
          transition: all .2s ease-in-out;
        }
      }

      .buttonText {
        color: var(--normal-color);
        transition: all .2s ease-in-out;
      }
    }
  }
}