"use client";

import { ArrowRight, X } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Banner7Props {
  className?: string;
}

const Banner7 = ({ className }: Banner7Props) => {
  const [isVisible, setIsVisible] = useState(true);

  const handleClose = () => {
    setIsVisible(false);
  };

  if (!isVisible) return null;
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "flex items-center justify-between gap-2 border-t-3 border-t-primary bg-muted px-4 py-4 dark:bg-card",
        className,
      )}
    >
      <div className="flex flex-1 items-center gap-4 text-sm font-medium md:justify-center md:text-center">
        <p>
          پلن سازمانی اکنون در دسترس است. با امکانات پیشرفته و گزارش‌دهی جامع، مدیریت تیم را بهبود بخشید
                            <a href="#" className="ms-2 whitespace-nowrap underline md:hidden">
            <span>اطلاعات بیشتر</span>
          </a>
        </p>
        <Separator
          orientation="vertical"
          className="hidden self-stretch bg-primary data-[orientation=vertical]:h-auto md:block"
        />
        <a href="#" className="group hidden items-center gap-2 md:flex">
          <span>اطلاعات بیشتر</span>
          <ArrowRight className="size-4 transition-transform duration-200 group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
        </a>
      </div>
      <Button
        type="button"
        variant="ghost"
        size="icon"
        aria-label="بستن"
        onClick={handleClose}
      >
        <X />
      </Button>
    </section>
  );
};

export { Banner7 };