'use client';

import React from 'react';
import { X } from 'lucide-react';
import { Button } from '@/features/shared/components/ui/button';

/**
 * EN: Announcement Banner props
 * VI: Props cho Announcement Banner
 */
export interface AnnouncementBannerProps {
    /** Announcement title / Tiêu đề thông báo */
    title: string;
    /** Announcement description / Mô tả thông báo */
    description: string;
    /** Link text / Text link */
    linkText: string;
    /** Link URL / URL link */
    linkUrl: string;
    /** Show close button / Hiển thị button đóng */
    showClose?: boolean;
    /** On close callback / Callback khi đóng */
    onClose?: () => void;
    /** Additional CSS classes / CSS classes bổ sung */
    className?: string;
}

/**
 * EN: Announcement Banner - Clean banner for news/announcements (x.ai style)
 * VI: Announcement Banner - Banner sạch sẽ cho tin tức/thông báo (phong cách x.ai)
 *
 * @example
 * ```tsx
 * <AnnouncementBanner
 *   title="New Feature Released"
 *   description="Check out our latest AI capabilities"
 *   linkText="Learn more"
 *   linkUrl="/news"
 * />
 * ```
 */
export function AnnouncementBanner({
    title,
    description,
    linkText,
    linkUrl,
    showClose = false,
    onClose,
    className,
}: AnnouncementBannerProps) {
    return (
        <div className={`bg-bg-secondary/40 backdrop-blur-glass border-b border-border-primary ${className}`}>
            <div className="container mx-auto px-6">
                <div className="flex items-center justify-between py-3">
                    <div className="flex items-center space-x-4">
                        <div className="flex items-center space-x-2">
                            <span className="text-xs text-text-tertiary uppercase tracking-wider font-medium">
                                News
                            </span>
                        </div>
                        <div className="hidden sm:block w-px h-4 bg-border-primary" />
                        <div className="flex items-center space-x-3">
                            <h3 className="text-sm font-medium text-text-primary">
                                {title}
                            </h3>
                            <span className="text-xs text-text-secondary">
                                {description}
                            </span>
                        </div>
                    </div>

                    <div className="flex items-center space-x-4">
                        <a
                            href={linkUrl}
                            className="text-xs text-text-secondary hover:text-text-primary transition-colors underline"
                        >
                            {linkText}
                        </a>
                        {showClose && onClose && (
                            <Button
                                variant="ghost"
                                size="sm"
                                onPress={onClose}
                                className="p-1 h-auto hover:bg-glass-hover"
                            >
                                <X className="h-3 w-3" />
                            </Button>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}