
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react"
import { useState } from "react"


export default function Footer() {
  const [email , setEmail] = useState<string>('');
  const handleSubmitNewsLetter = async()  :Promise<void> => {
    
  }

  return (
    <section className="w-full py-6 md:py-12 lg:py-24 bg-zinc-900 dark:bg-zinc-100">
      <div className="container px-4 md:px-6 flex flex-col items-center text-center mx-auto">
        <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl md:text-4xl lg:text-5xl/none text-white">
          Stay Connected with <span className="text-purple-700">EduConnect</span>
        </h2>
        <p className="mx-auto max-w-[700px] text-zinc-100 md:text-lg dark:text-zinc-800">
          Subscribe to our newsletter and follow us on our social media.
        </p>
        <div className="w-full max-w-md space-y-2 my-4">
          <form className="flex space-x-2">
            <Input 
              type="email" 
              placeholder="Enter your email" 
              className="max-w-lg flex-1 text-zinc-900 bg-white" 
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Button type="submit" variant="outline" className="text-white border-purple-700 bg-purple-700">
              Subscribe
            </Button>
          </form>
        </div>
        <div className="flex justify-center space-x-4 mt-16">
          <Link href="#" aria-label="Facebook page" className="text-purple-700" prefetch={false}>
            <Facebook className="h-6 w-6" />
          </Link>
          <Link href="#" aria-label="Twitter profile" className="text-purple-700" prefetch={false}>
            <Twitter className="h-6 w-6" />
          </Link>
          <Link href="#" aria-label="Instagram profile" className="text-purple-700" prefetch={false}>
            <Instagram className="h-6 w-6" />
          </Link>
          <Link href="#" aria-label="LinkedIn profile" className="text-purple-700" prefetch={false}>
            <Linkedin className="h-6 w-6" />
          </Link>
        </div>
      </div>
      <p className=" text-center mt-6 text-purple-700 text-white font-semibold">&copy; Copyright - EduConnect 2024 - 2026</p>
    </section>
  )
}



