import type { Meta, StoryObj } from "@storybook/preact";
import { TilesView } from "./TilesView";
import type { RecordSpec, DataRow } from "@/types/spec";

const rec: RecordSpec = {
  name: "Photos", table: "photos", display: "title", required: [],
  fields: { title: { type: "text" }, image: { type: "image" } },
};

const rows: DataRow[] = [
  { id: "1", title: "Sunset", image: "https://picsum.photos/seed/a/300/300" },
  { id: "2", title: "Mountains", image: "https://picsum.photos/seed/b/300/300" },
  { id: "3", title: "Ocean", image: "https://picsum.photos/seed/c/300/300" },
  { id: "4", title: "Forest", image: "https://picsum.photos/seed/d/300/300" },
  { id: "5", title: "City", image: "https://picsum.photos/seed/e/300/300" },
  { id: "6", title: "Desert", image: "https://picsum.photos/seed/f/300/300" },
];

const rowsNoImages: DataRow[] = [
  { id: "1", title: "Alice Chen" },
  { id: "2", title: "Bob Kumar" },
  { id: "3", title: "Carol Santos" },
  { id: "4", title: "Dan Lee" },
];

const meta: Meta<typeof TilesView> = { title: "Views/TilesView", component: TilesView, parameters: { layout: "padded" } };
export default meta;
type Story = StoryObj<typeof TilesView>;

export const WithImages: Story = {
  render: () => <TilesView rows={rows} rec={rec} titleField="title" onViewDetail={() => {}} table="photos" />,
};

export const WithoutImages: Story = {
  render: () => <TilesView rows={rowsNoImages} rec={undefined} titleField="title" onViewDetail={() => {}} table="people" />,
};
