import { Github, Instagram, Twitter, Youtube } from "lucide-react";
import Image from "next/image";
import {
  Footer,
  FooterBottom,
  FooterColumn,
  FooterContent,
} from "../../ui/footer";

export default function FooterSection() {
  return (
    <footer className="w-full bg-background px-4">
      <div className="mx-auto">
        <Footer>
          <FooterContent className="container">
            <FooterColumn className="col-span-2 sm:col-span-3 md:col-span-1">
              <div className="flex items-center">
                <Image src={"/logo.png"} width={30} height={30} alt="logo" />
                <h3 className="text-xl font-bold text-parch">پارچ کست</h3>
              </div>
            </FooterColumn>
            <FooterColumn>
              <h3 className="text-md pt-1 font-semibold">همراه با ما</h3>
              <a href="/" className="text-sm text-muted-foreground">
                تماس با ما
              </a>
              <a href="/" className="text-sm text-muted-foreground">
                درباره ما
              </a>
              <a href="/" className="text-sm text-muted-foreground">
                حمایت از پادکست{" "}
              </a>
              <a href="/" className="text-sm text-muted-foreground">
                همکاری اسپانسر{" "}
              </a>
            </FooterColumn>
            <FooterColumn>
              <h3 className="text-md pt-1 font-semibold">پربازدیدترین‌ها</h3>
              <a href="/" className="text-sm text-muted-foreground">
                داستان پارچ
              </a>
              <a href="/" className="text-sm text-muted-foreground">
                داستان پارچ کست
              </a>
              <a href="/" className="text-sm text-muted-foreground">
                پارچ گیمینگ
              </a>
            </FooterColumn>
            <FooterColumn>
              <h3 className="text-md pt-1 font-semibold">ما را دنبال کنید</h3>
              <span className="text-sm text-muted-foreground text-justify">
                مطالب بیشتر و اطلاعات گوناگونی در شبکه‌های اجتماعی رخ منتشر
                می‌شود که شما را به دنبال کردن آن‌ها دعوت می‌کنیم.
              </span>
              <div className="flex gap-4">
                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
                  <Github size={16} />
                </div>
                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
                  <Twitter size={16} />
                </div>
                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
                  <Instagram size={16} />
                </div>
                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
                  <Youtube size={16} />
                </div>
              </div>
            </FooterColumn>
          </FooterContent>
          <FooterBottom>
            <div className="container flex justify-between">
              <div>© 2025 پارچ کست. تمامی حقوق محفوظ است</div>

              <div className="flex items-center gap-4">
                <a href="/">سیاست حفظ حریم خصوصی</a>
                <a href="/">شرایط خدمات</a>
              </div>
            </div>
          </FooterBottom>
        </Footer>
      </div>
    </footer>
  );
}