import React from "react";
import { Button } from "@react-email/components";
import { FaFacebookF } from "react-icons/fa";
import { FaInstagram } from "react-icons/fa";
import { FaTiktok } from "react-icons/fa";
import "./Contact.css";

const Contact = () => {
  return (
    <div className="contact w-full flex pb-[5px] pt-[50px] justify-center flex-col gap-8">
      <div className="icons flex gap-4 text-xl text-white sm:justify-start justify-center items-center w-full">
        <FaFacebookF />
        <FaInstagram />
        <FaTiktok />
      </div>
      <div className="wrapper flex tablet:items-center justify-between w-full sm:flex-row flex-col">
        <span>SUBSCRIBE TO OUR NEWSLETTER:</span>
        <div className="mail w-full max-w-md flex">
          <input
            type="text"
            placeholder="Enter your email address"
            className="sub-input p-[5px] border-none rounded-[5px 0 0 5px] w-1/2"
          />
          <button className="sub-button py-[5px] px-[10px] text-white bg-orange-600 rounded-[0 5px 5px 0] border-none">
            JOIN US
          </button>
        </div>
      </div>
    </div>
  );
};

export default Contact;