import { Meta, StoryObj } from '@storybook/react';
import { NJFooter } from './NJFooter';

const meta: Meta<typeof NJFooter> = {
  title: 'Components/Footer',
  id: 'footer',
  component: NJFooter
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  args: {
    links: [
      { text: 'Sitemap', url: '' },
      { text: 'Join-us', url: '' },
      { text: 'Terms of use', url: '' },
      { text: 'Personal data', url: '' },
      { text: 'Cookies management', url: '' },
      { text: 'Mediator', url: '' },
      { text: 'Accessibility', url: '' }
    ],
    socialLinks: [
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/b/b9/2023_Facebook_icon.svg',
          alt: 'Facebook'
        }
      },
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/2/21/Instagram_Glyph_Gradient_RGB_logo.svg',
          alt: 'Instagram'
        }
      },
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/8/81/LinkedIn_icon.svg',
          alt: 'Linkedin'
        }
      },
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/a/a0/YouTube_social_red_circle_%282017%29.svg',
          alt: 'Youtube'
        }
      }
    ]
  }
};

/**
 * You can customize the menu section minimum by overriding the `--nj-footer-menu-min-width` css variable like so:
 *
 * In your jsx:
 *
 * ```jsx
 * <NJFooter className="footer-additional-classname-for-custom-width" menuLinks="..." socialLinks="..." links="..." />
 * ```
 *
 * In your css:
 *
 * ```css
 * .footer-additional-classname-for-custom-width {
 *    --nj-footer-menu-min-width: 400px; // defaults to 14rem
 *  }
 * ```
 */
export const WithFooterNav: Story = {
  name: 'With a footer navigation',
  args: {
    menuLists: [
      {
        title: 'About Us',
        items: [
          { text: 'Our History', url: '#' },
          { text: 'Leadership Team', url: '#' },
          { text: 'Careers', url: '#' },
          { text: 'Press Releases', url: '#' },
          { text: 'Investor Relations', url: '#' }
        ]
      },
      {
        title: 'Services',
        items: [
          { text: 'Consulting', url: '#' },
          { text: 'Support', url: '#' },
          { text: 'Cloud Solutions', url: '#' },
          { text: 'Training & Certification', url: '#' },
          { text: 'Custom Development', url: '#' }
        ]
      },
      {
        title: 'Resources',
        items: [
          { text: 'Documentation', url: '#' },
          { text: 'Community Forums', url: '#' },
          { text: 'Blog', url: '#' },
          { text: 'Case Studies', url: '#' },
          { text: 'API Reference', url: '#' }
        ]
      },
      {
        title: 'Contact Us',
        items: [
          { text: 'Customer Support', url: '#' },
          { text: 'Partner Inquiries', url: '#' },
          { text: 'Sales', url: '#' },
          { text: 'Locations', url: '#' },
          { text: 'Feedback', url: '#' }
        ]
      }
    ],
    links: [
      { text: 'Sitemap', url: '' },
      { text: 'Join-us', url: '' },
      { text: 'Terms of use', url: '' },
      { text: 'Personal data', url: '' },
      { text: 'Cookies management', url: '' },
      { text: 'Mediator', url: '' },
      { text: 'Accessibility', url: '' }
    ],
    socialLinks: [
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/b/b9/2023_Facebook_icon.svg',
          alt: 'Facebook'
        }
      },
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/2/21/Instagram_Glyph_Gradient_RGB_logo.svg',
          alt: 'Instagram'
        }
      },
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/8/81/LinkedIn_icon.svg',
          alt: 'Linkedin'
        }
      },
      {
        url: '',
        logo: {
          path: 'https://upload.wikimedia.org/wikipedia/commons/a/a0/YouTube_social_red_circle_%282017%29.svg',
          alt: 'Youtube'
        }
      }
    ]
  }
};