import { TimelineSection, TimelineEvent } from '@smileytech/timeline';
import '@smileytech/timeline/dist/timeline.css';

const events: TimelineEvent[] = [
  {
    id: '1',
    title: 'Senior Developer',
    description: 'Led development of multiple React applications...',
    category: 'work',
    date: new Date('2023-01-01'),
    company: {
      id: '1',
      name: 'Tech Company',
      logo_url: 'https://example.com/logo.png',
      website_url: 'https://example.com'
    },
    tech_stack_summary: ['React', 'TypeScript', 'Node.js']
  }
];

function App() {
  return (
    <TimelineSection 
      events={events}
      headerTitle="My Career Journey"
      headerSubtitle="A timeline of my professional and educational milestones"
    />
  );
}

import { TimelineSection, TimelineEvent } from '@smileytech/timeline';
import '@smileytech/timeline/dist/timeline.css';

const events: TimelineEvent[] = [
  {
    id: '1',
    title: 'Senior Developer',
    description: 'Led development of multiple React applications...',
    category: 'work',
    date: new Date('2023-01-01'),
    company: {
      id: '1',
      name: 'Tech Company',
      logo_url: 'https://example.com/logo.png'
    },
    tech_stack_summary: ['React', 'TypeScript', 'Node.js']
  }
];

function App() {
  return (
    <TimelineSection 
      events={events}
      headerTitle="My Career Journey"
      headerSubtitle="A timeline of my professional and educational milestones"
    />
  );
}

// Custom timeline card
const CustomCard = ({ event, index }) => (
  <div className="my-custom-card">
    <h3>{event.title}</h3>
    <p>{event.description}</p>
  </div>
);

// Custom indicator
const CustomIndicator = ({ event, index }) => (
  <div className="custom-indicator">
    <span>★</span>
  </div>
);

// Custom filter
const CustomFilter = ({ category, isActive, onClick }) => (
  <button 
    onClick={onClick}
    className={`custom-filter ${isActive ? 'active' : ''}`}
  >
    {category}
  </button>
);

<TimelineSection
  events={events}
  renderEvent={(event, index) => <CustomCard event={event} index={index} />}
  renderIndicator={(event, index) => <CustomIndicator event={event} index={index} />}
  renderFilter={(category, isActive, onClick) => (
    <CustomFilter category={category} isActive={isActive} onClick={onClick} />
  )}
/>

import { TimelineSection } from '@smileytech/timeline';

// Define your custom data type
interface CustomEvent {
  id: string;
  title: string;
  description: string;
  category: 'personal' | 'professional' | 'academic';
  date: Date;
  location: string;
  tags: string[];
}

const customEvents: CustomEvent[] = [
  {
    id: '1',
    title: 'Graduated from University',
    description: 'Completed my degree in Computer Science.',
    category: 'academic',
    date: new Date('2020-05-15'),
    location: 'University of Technology',
    tags: ['Computer Science', 'Graduation']
  }
];

// Custom render function
const CustomCard = ({ event, index }) => (
  <div className="my-custom-card">
    <h3>{event.title}</h3>
    <p>{event.description}</p>
    <span>{event.location}</span>
  </div>
);

<TimelineSection<CustomEvent>
  events={customEvents}
  renderEvent={(event, index) => <CustomCard event={event} index={index} />}
/>

// Hexagonal filter design
const CustomHexagonalFilter = ({ category, isActive, onClick }) => (
  <button onClick={onClick} className={`hexagon-filter ${isActive ? 'active' : ''}`}>
    <span>{category}</span>
  </button>
);

// Hexagonal indicator
const CustomHexagonalIndicator = ({ event, index }) => (
  <div className="hexagon-indicator">
    <span>★</span>
  </div>
);

<TimelineSection
  events={events}
  renderEvent={(event, index) => <CustomCard event={event} index={index} />}
  renderIndicator={(event, index) => <CustomHexagonalIndicator event={event} index={index} />}
  renderFilter={(category, isActive, onClick) => (
    <CustomHexagonalFilter category={category} isActive={isActive} onClick={onClick} />
  )}
  renderShowAllToggle={(isAllActive, onClick) => (
    <CustomHexagonalShowAll isAllActive={isAllActive} onClick={onClick} />
  )}
  renderSortToggle={(sortOrder, onClick) => (
    <CustomHexagonalSort sortOrder={sortOrder} onClick={onClick} />
  )}
  dateFormat="year"
/>

// Year only
<TimelineSection events={events} dateFormat="year" />

// Year and month
<TimelineSection events={events} dateFormat="year-month" />

// Full date
<TimelineSection events={events} dateFormat="year-month-day" />

// Date with time
<TimelineSection events={events} dateFormat="year-month-day-time" />

const events = [
  {
    id: '1',
    title: 'Birthday',
    category: 'personal',
    date: new Date('1990-08-20'),
    bday: '1990-08-20' // Custom date field
  }
];

<TimelineSection
  events={events}
  getEventDate={(event) => event.bday}
  dateFormat="year-month-day"
/>

import '@smileytech/timeline/dist/timeline.css';