import { cn } from '../../../lib/cn';

export interface ArticleItemProps {
    id: number;
    name: string;
    tags: string[];
}

const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
    return (
        <div
            className={cn(
                'w-full relative rounded-[10px] text-liquid-white mb-[20px]',
                // type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
                'gap-[20px] px-[20px] py-[10px] box-border ',
                'border-b-[1px] border-b-liquid-lighter',
            )}
        >
            <div className="h-[23px] flex ">
                <div className="text-[18px] font-bold w-[60px] mr-[20px] flex items-center">
                    #{id}
                </div>
                <div className="text-[18px] font-bold flex items-center bg-red-400r">
                    {name}
                </div>
            </div>
            <div className="text-[14px] flex text-liquid-light gap-[10px] mt-[10px]">
                {tags.map((v, i) => (
                    <div
                        key={i}
                        className={cn(
                            'rounded-full px-[16px] py-[8px] bg-liquid-lighter',
                            v == 'Sertificated' && 'text-liquid-green',
                        )}
                    >
                        {v}
                    </div>
                ))}
            </div>
        </div>
    );
};

export default ArticleItem;