import React from 'react';
import {Meta, StoryObj} from '@storybook/react';
import {IconCake, IconClock, IconSearch} from '@tabler/icons-react-native';
import {IconButton} from '@components/_HuGo';

import {HeaderHome} from './index';

const meta = {
  title: 'HuGo/Header/HeaderHome',
  component: HeaderHome,
} satisfies Meta<typeof HeaderHome>;

export default meta;

type HeaderHomeStory = StoryObj<typeof HeaderHome>;

export const HomeBasic: HeaderHomeStory = {
  render: () => (
    <HeaderHome
      rightContent={
        <>
          <IconButton Icon={IconClock} variant="tertiary" />
          <IconButton Icon={IconCake} variant="tertiary" />
          <IconButton Icon={IconSearch} variant="tertiary" />
        </>
      }
    />
  ),
};

export const HomeWithChips: HeaderHomeStory = {
  render: () => (
    <HeaderHome>
      <HeaderHome.SubheaderChips
        list={[
          {id: 1, label: 'All Posts'},
          {id: 2, label: 'Popular'},
          {id: 3, label: 'Recent'},
          {id: 4, label: 'Following'},
        ]}
        selected={1}
        onItemPress={() => {}}
      />
    </HeaderHome>
  ),
};

export const HomeWithSearch: HeaderHomeStory = {
  render: () => (
    <HeaderHome>
      <HeaderHome.SubheaderSearch
        placeholder="Search..."
        value=""
        onChangeText={() => {}}
      />
    </HeaderHome>
  ),
};

export const HomeWithTabs: HeaderHomeStory = {
  render: () => (
    <HeaderHome>
      <HeaderHome.SubheaderTabs
        routes={[
          {key: 'feed', label: 'Feed'},
          {key: 'people', label: 'People'},
          {key: 'articles', label: 'Articles'},
          {key: 'marketplace', label: 'Marketplace'},
        ]}
        renderScene={() => null}
        initialIndex={0}
      />
    </HeaderHome>
  ),
};
