'use client';

import { X } from 'lucide-react';

import * as Badge from '@/components/ui/badge';
import * as Button from '@/components/ui/button';
import { cn } from '@/utils/cn';
import { tv, type VariantProps } from '@/utils/tv';
const announcementVariants = tv({
  base: 'relative flex h-10 w-full items-center justify-center gap-2 px-4 py-2.5',
  variants: {
    variant: {
      stroke: 'border-stroke-soft-200 bg-bg-white-0 border-b',
      lighter: 'bg-bg-weak-25',
      filled: 'bg-primary-base',
    },
  },
  defaultVariants: {
    variant: 'lighter',
  },
});

type AnnouncementVariants = VariantProps<typeof announcementVariants>;

type Announcement02Props = AnnouncementVariants & {
  className?: string;
  text?: string;
};

export default function NewBadgeMutedAnnouncement({
  variant = 'lighter',
  className,
  text = 'This is a text area for announcements or product updates.',
}: Announcement02Props) {
  const isFilled = variant === 'filled';

  return (
    <div className={announcementVariants({ variant, class: className })}>
      <div className='flex min-w-0 items-center gap-2'>
        <div className='flex shrink-0'>
          <Badge.Root
            variant='lighter'
            color='blue'
            className={cn(
              'rounded-[5px] px-1.25 text-[9px] leading-2.75 font-semibold tracking-[0.18px]',
              isFilled
                ? 'bg-information-lighter text-information-base md:bg-white-alpha/16 md:text-static-white'
                : 'bg-information-lighter text-information-base',
            )}
          >
            NEW
          </Badge.Root>
        </div>
        <div
          className={cn(
            'text-label-xs truncate',
            isFilled ? 'text-static-white' : 'text-text-sub-600',
          )}
        >
          {text}
        </div>
      </div>
      <div className='flex md:absolute md:top-1/2 md:right-4 md:-translate-y-1/2'>
        <Button.Root
          variant='primary'
          mode='ghost'
          className='hover:text-text-strong-950 size-5 cursor-pointer rounded-none p-0 hover:bg-transparent'
        >
          <Button.Icon
            as={X}
            className={cn(
              'size-4 duration-300',
              isFilled
                ? 'group-hover:text-static-white/60 text-static-white'
                : 'text-text-soft-400 group-hover:text-text-sub-600',
            )}
          />
        </Button.Root>
      </div>
    </div>
  );
}