import type { Meta, StoryObj } from '@storybook/react';
import BannerComponent from './Banner';

import image from '@/assets/img/banner-img.jpg';

import area from '@/assets/img/icons/area.png';
import basement from '@/assets/img/icons/basement.png';
import office from '@/assets/img/icons/office.png';
import residence from '@/assets/img/icons/residence.png';
import tower from '@/assets/img/icons/tower.png';
import store from '@/assets/img/icons/store.png';

const meta: Meta<typeof BannerComponent> = {
  title: 'TopLevel/Banner',
  component: BannerComponent,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen'
  }
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Banner: Story = {
  args: {
    title: 'JUNCTION',
    description:
      "A launchpad for big ideas, bold moves, and unstoppable innovation. It’s more than just a place to work; it’s a thriving ecosystem where creativity meets opportunity. With dynamic spaces, modern design, and an energy that keeps things moving. This is where ideas spark, connections thrive, and every day brings something new. Whether you're brainstorming your next big thing, teaming up with like-minded innovators, or just enjoying the buzz of a vibrant community, there’s always something happening here.",
    button: {
      label: 'REGISTER YOUR INTEREST',
      url: '#'
    },
    labels: {
      scrollDown: 'scroll down'
    },
    specifications: [
      {
        image: {
          url: area.src,
          width: area.width,
          height: area.height,
          alternativeText: 'area'
        },
        label: 'Land area',
        value: '93k Sqm'
      },
      {
        image: {
          url: tower.src,
          width: tower.width,
          height: tower.height,
          alternativeText: 'tower'
        },
        label: '# of buildings',
        value: '13'
      },
      {
        image: {
          url: office.src,
          width: office.width,
          height: office.height,
          alternativeText: 'office'
        },
        label: '# of offices',
        value: '650 Units'
      },
      {
        image: {
          url: basement.src,
          width: basement.width,
          height: basement.height,
          alternativeText: 'basement'
        },
        label: 'Total BUA (Including basement)',
        value: '150 Sqm'
      },
      {
        image: {
          url: store.src,
          width: store.width,
          height: store.height,
          alternativeText: 'store'
        },
        label: 'of F&B and retail units',
        value: '55'
      },
      {
        image: {
          url: residence.src,
          width: residence.width,
          height: residence.height,
          alternativeText: 'residence'
        },
        label: '1 building with (150 keys) & 100 branded residence',
        value: 'Hospitality'
      }
    ],
    image: {
      url: image.src,
      width: image.width,
      height: image.height,
      alternativeText: 'Banner image'
    }
  }
};
