import type { CurrentUser, SiteSettings } from '../env';
import { Layout } from './layout';

export function LinksPage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser | null;
  csrfToken: string;
  links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string }>;
}) {
  const categories = Array.from(new Set(props.links.map((link) => link.category || 'default')));
  return (
    <Layout settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} links={props.links} title="友链" showHero={false}>
      <section class="plain-page">
        <h1>友链</h1>
        {categories.length ? categories.map((category) => (
          <div class="link-category">
            <h2>{category}</h2>
            <div class="links-grid full">
              {props.links.filter((link) => (link.category || 'default') === category).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>
              ))}
            </div>
          </div>
        )) : <p class="empty-state">暂无友链</p>}
      </section>
    </Layout>
  );
}

export function MessagePage(props: {
  title: string;
  message: string;
  settings: SiteSettings;
  currentUser: CurrentUser | null;
  csrfToken: string;
  links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string }>;
}) {
  return (
    <Layout settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} links={props.links} title={props.title} showHero={false}>
      <section class="plain-page">
        <h1>{props.title}</h1>
        <p>{props.message}</p>
      </section>
    </Layout>
  );
}
