import type { Meta, StoryObj } from '@storybook/react'
import { colors } from '@/styles/variables'
import React from 'react'

import BlogCard from './BlogCard.component'
import { IBlogCard } from './BlogCard.interface'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Backlog/BlogCard',
  component: BlogCard
} as Meta

const image = (
  <img
    width="100%"
    height="100%"
    sizes="100vw"
    decoding="async"
    src="/assets/placeholder.png"
    alt="Empty state"
  />
)
const image2 = (
  <img
    width="100%"
    height="100%"
    sizes="100vw"
    decoding="async"
    src="https://images.pexels.com/photos/19799429/pexels-photo-19799429.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
    alt="Empty state"
  />
)

export const Simple: StoryObj<Partial<IBlogCard>> = {
  render: args => (
    <div
      style={{
        backgroundColor: `${colors.gray90}`,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(45%, 1fr) ',
        gap: '16px'
      }}
    >
      <BlogCard {...args} imageElement={image2}></BlogCard>
      <BlogCard {...args}></BlogCard>
      <BlogCard {...args}></BlogCard>
      <BlogCard {...args}></BlogCard>
    </div >
  ),
  args: {
    date: '24 nov 23',
    categories: ['product', 'testes', 'prohjects', 'others', 'portugal'],
    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageElement: image,
    description:
      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.',
    author: 'Authors name',
    linkElement: <a href="https://google.com" className="linker"></a>,
    buttonLabel: 'See More',
    variant: 'regular',
  }
}
export const FullHeight: StoryObj<Partial<IBlogCard>> = {
  render: args => (
    <div
      style={{
        backgroundColor: `${colors.gray90}`,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(45%, 1fr) ',
        gap: '16px'
      }}
    >
      <BlogCard {...args} imageElement={image}></BlogCard>
      <BlogCard {...args}></BlogCard>
      <BlogCard {...args}></BlogCard>
      <BlogCard {...args}></BlogCard>
    </div>
  ),
  args: {
    date: '24 nov 23',
    categories: ['product', 'testes'],
    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    imageElement: image2,
    description:
      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.',
    author: 'Authors name',
    linkElement: <a href="https://google.com" className="linker"></a>,
    buttonLabel: 'See More',
    variant: 'fullHeight',
  }
}