'use client';

import React from 'react';
import Link from 'next/link';
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from '@/components/ui/carousel';

const PROMOS = [
  { text: 'Send a Gift Card', href: '/' },
  { text: 'Free shipping on orders over $100', href: '/' },
  { text: '30-day return policy', href: '/' },
];

const PromoBanner: React.FC = () => {
  return (
    <div className="bg-muted">
      <Carousel opts={{ loop: true }} className="container mx-auto px-4">
        <CarouselContent>
          {PROMOS.map((promo) => (
            <CarouselItem key={promo.text}>
              <div className="h-10 flex items-center justify-center">
                <Link
                  href={promo.href}
                  className="text-xs font-medium text-gray-900 underline underline-offset-2 hover:text-gray-600 transition-colors"
                >
                  {promo.text}
                </Link>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious
          variant="ghost"
          className="left-0 size-7 text-gray-900 hover:text-gray-600"
        >
          <RiArrowLeftSLine size={16} />
        </CarouselPrevious>
        <CarouselNext
          variant="ghost"
          className="right-0 size-7 text-gray-900 hover:text-gray-600"
        >
          <RiArrowRightSLine size={16} />
        </CarouselNext>
      </Carousel>
    </div>
  );
};

export default PromoBanner;