import { Link } from "react-router";
import Button from "./ui/Button";
import FacebookIcon from "./icons/FacebookIcon";
import YoutubeIcon from "./icons/YoutubeIcon";
import InstagramIcon from "./icons/InstagramIcon";
import TwitterIcon from "./icons/TwitterIcon";
import WhatsappIcon from "./icons/WhatsappIcon";

function Socials() {
  return (
    <div className="md:grid flex flex-col 2xl:grid-cols-2 2xl:gap-[2.222vw] gap-8">
      <div className="flex 2xl:gap-[0.556vw] gap-2">
        <Link target="_blank" to="https://google.com">
          <Button variant="primary" size="small">
            <div className="2xl:size-[1.111vw] size-4">
              <FacebookIcon />
            </div>
          </Button>
        </Link>
        <Link target="_blank" to="/">
          <Button variant="primary" size="small">
            <div className="2xl:size-[1.111vw] size-4">
              <YoutubeIcon />
            </div>
          </Button>
        </Link>
        <Link target="_blank" to="/">
          <Button variant="primary" size="small">
            <div className="2xl:size-[1.111vw] size-4">
              <InstagramIcon />
            </div>
          </Button>
        </Link>
        <Link target="_blank" to="/">
          <Button variant="primary" size="small">
            <div className="2xl:size-[1.111vw] size-4">
              <TwitterIcon />
            </div>
          </Button>
        </Link>
        <Link target="_blank" to="/">
          <Button variant="primary" size="small">
            <div className="2xl:size-[1.111vw] size-4">
              <WhatsappIcon />
            </div>
          </Button>
        </Link>
      </div>
      <div className="flex max-md:flex-col justify-between md:items-center gap-2 md:col-start-2">
        <Link className="text-s opacity-60" to={"/"}>
          Terms of Use
        </Link>
        <Link className="text-s opacity-60" to={"/"}>
          Privacy Policy
        </Link>
        <Link className="text-s opacity-60" to={"/"}>
          Copyrights © 2025 Baraha Town
        </Link>
      </div>
    </div>
  );
}

export default Socials;
