/**
 * KRA - Dashboard Banner Component
 * 与GVA banner.vue 逻辑一致 - 轮播图
 */
import React from 'react';
import { Carousel } from 'antd';

interface BannerItem {
  img: string;
  link: string;
}

const banners: BannerItem[] = [
  {
    img: 'https://go-kratos.dev/img/logo.svg',
    link: 'https://go-kratos.dev/'
  },
  {
    img: 'https://avatars.githubusercontent.com/u/68029786?s=200&v=4',
    link: 'https://github.com/go-kratos/kratos'
  },
];

const Banner: React.FC = () => {
  const openLink = (link: string) => {
    window.open(link, '_blank');
  };

  return (
    <div style={{ marginTop: '-8px', height: '160px', overflow: 'hidden' }}>
      <Carousel autoplay>
        {banners.map((item, index) => (
          <div key={index}>
            <div
              onClick={() => openLink(item.link)}
              style={{
                height: '160px',
                cursor: 'pointer',
                background: 'linear-gradient(135deg, #1890ff 0%, #722ed1 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <img
                src={item.img}
                alt="banner"
                style={{ maxHeight: '80px', maxWidth: '80%', objectFit: 'contain' }}
              />
            </div>
          </div>
        ))}
      </Carousel>
    </div>
  );
};

export default Banner;
