import { Meta } from '@storybook/react'
import { ProductCard } from '../components/ProductCard/ProductCard'
import React from 'react'

const meta = {
  title: 'Layout/ProductCard',
  component: ProductCard,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof ProductCard>

export default meta

export const BasicProductCard = () => (
  <ProductCard
    favorite={{
      flagged: false,
      onFlag: () => console.log('flagged'),
    }}
    title="Financeiro e Jurídico"
    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
    color="#FDF6E3"
    icon={{
      iconName: 'olosAnalytics',
      iconColor: '#B16E4B',
      bgColor: '#F6F07F',
      scale: 'medium',
      iconWidth: '36px',
      iconHeight: '36px',
    }}
  />
)
BasicProductCard.storyName = 'Basic Product Card'

export const DisabledProductCard = () => (
  <ProductCard
    title="Financeiro e Jurídico"
    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
    color="#FDF6E3"
    icon={{
      iconName: 'olosCloud',
      iconColor: '#B16E4B',
      bgColor: '#F6F07F',
      scale: 'medium',
      iconWidth: '36px',
      iconHeight: '36px',
    }}
    disabled
  />
)
DisabledProductCard.storyName = 'Disabled Product Card'

export const FlaggedProductCard = () => (
  <ProductCard
    favorite={{
      flagged: true,
      onFlag: () => console.log('flagged')
    }}
    title="Financeiro e Jurídico"
    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
    color="#FDF6E3"
    icon={{
      iconName: 'olosAnywhere',
      iconColor: '#B16E4B',
      bgColor: '#F6F07F',
      scale: 'medium',
      iconWidth: '36px',
      iconHeight: '36px',
    }}
  />
)

FlaggedProductCard.storyName = 'Flagged Product Card'

export const NoBorderProductCard = () => (
  <ProductCard
    title="Financeiro e Jurídico"
    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
    color="#FDF6E3"
    icon={{
      iconName: 'olosAnalytics',
      iconColor: '#B16E4B',
      bgColor: '#F6F07F',
      scale: 'medium',
      iconWidth: '36px',
      iconHeight: '36px',
    }}
    hasBorder={false}
  />
)
NoBorderProductCard.storyName = 'No Border Product Card'

export const ProductCardGroup = () => (
  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', justifyContent: 'center', width: '1024px'}}>
    <ProductCard
      title="Financeiro e Jurídico"
      description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
      color="#FDF6E3"
      icon={{
        iconName: 'olosAnalytics',
        iconColor: '#B16E4B',
        bgColor: '#F6F07F',
        scale: 'medium',
        iconWidth: '36px',
        iconHeight: '36px',
      }}
    />
    <ProductCard
      title="Financeiro e Jurídico"
      description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
      color="#FDF6E3"
      icon={{
        iconName: 'olosCloud',
        iconColor: '#B16E4B',
        bgColor: '#F6F07F',
        scale: 'medium',
        iconWidth: '36px',
        iconHeight: '36px',
      }}
    />
    <ProductCard
      title="Financeiro e Jurídico"
      description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
      color="#FDF6E3"
      icon={{
        iconName: 'olosJourneyX',
        iconColor: '#B16E4B',
        bgColor: '#F6F07F',
        scale: 'medium',
        iconWidth: '36px',
        iconHeight: '36px',
      }}
    />
  </div>
)
ProductCardGroup.storyName = 'Product Card Group'