import { Component, For } from 'solid-js';
import { AppItem } from '@/types/app';
import AppCard from '../AppCard';
import { Skeleton } from "@/components/ui/skeleton";

interface AppListProps {
  apps: AppItem[];
  loading: boolean;
  category?: string;
}

const AppList: Component<AppListProps> = (props) => {
  return (
    <div class="grid auto-rows-auto grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 pb-6">
      {props.loading ? (
        <For each={Array(8).fill(0)}>
          {() => (
            <div class="p-4 rounded-lg border border-border/40 bg-card">
              <div class="flex items-start gap-3">
                <Skeleton width={48} height={48} radius={8} />
                <div class="flex-1 min-w-0">
                  <div class="flex items-center justify-between gap-2">
                    <Skeleton height={20} width={96} />
                    <Skeleton height={16} width={48} />
                  </div>
                  <div class="mt-1">
                    <Skeleton height={16} width={100} class="mt-2" />
                    <Skeleton height={16} width={100} class="mt-2" />
                  </div>
                </div>
              </div>
            </div>
          )}
        </For>
      ) : (
        <For each={props.apps}>
          {(app) => (
            <AppCard
              category={props.category || app.category || ''}
              pkgname={app.pkgname}
              name={app.name}
              description={app.more}
              icon={app.icon}
            />
          )}
        </For>
      )}
    </div>
  );
};

export default AppList;