import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';
import { getPatrons } from '../lib/patreon';
import Link from 'next/link'


interface PatronsListProps {
  displayStyle: string;
}

export default async function PatronsList({ displayStyle }: PatronsListProps) {
  const patrons = await getPatrons()
  console.log('patrons list as follows')
  console.log(patrons)

  if (!patrons || patrons.length === 0) return (
    <SkeletonTheme baseColor="#000" highlightColor="#000">
      <Skeleton count={3} enableAnimation={false} width={'18em'} />
    </SkeletonTheme>
  );

  if (displayStyle === 'box') {
    return (
      <div className="columns is-multiline">
        {patrons.map((patron) => (
          
          <div key={patron.id} className="column is-full-mobile is-half-tablet is-one-third-desktop">
            <div className="box">
              <article className="media">
                <div className="media-content">
                  <div className="content">
                    {patron.full_name && (
                      <span>
                        <b>{patron.full_name}</b>
                      </span>
                    )}
                  </div>
                </div>
              </article>
            </div>
          </div>
        ))}
      </div>
    );
  } else if (displayStyle === 'list') {
    const patronNames = patrons.map((patron) => patron.full_name.trim()).join(', ');
    return <span>{patronNames}</span>;
  } else {
    return <span></span>; // Handle unsupported display styles or provide a default display style
  }
}