import { Icons } from './icons';

export function LinksModal(props: { links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string }> }) {
  return (
    <div class="wm-modal" x-show="modals.links" x-cloak {...{ 'x-transition.opacity.duration.300ms': '' }}>
      <div class="wm-modal-mask" data-close-modal="links"></div>
      <section class="wm-modal-card links-card" role="dialog" aria-modal="true" aria-labelledby="links-title">
        <button class="modal-close" type="button" data-close-modal="links" aria-label="关闭">{Icons.close()}</button>
        <h2 id="links-title">友链</h2>
        <div class="links-grid">
          {props.links.length ? props.links.map((link) => (
            <a class="friend-link" href={link.url} target="_blank" rel="noopener noreferrer">
              <img src={link.avatar || '/assets/images/default-avatar.svg'} alt="" loading="lazy" />
              <span>
                <strong>{link.name}</strong>
                <small>{link.description}</small>
              </span>
            </a>
          )) : <p class="empty-state">暂无友链</p>}
        </div>
      </section>
    </div>
  );
}
