import type { Meta, StoryObj } from "@storybook/react";
import { TokenDropdown } from "./TokenDropdown";
import { useState } from "react";

const meta: Meta<typeof TokenDropdown> = {
  component: TokenDropdown,
};

export default meta;

type Story = StoryObj<typeof TokenDropdown>;

const mockTokens = [
  {
    symbol: "rsETH",
    iconUri: "/tokens/kelp.webp",
  },
  {
    iconUri: "/tokens/renzo.webp",
    symbol: "ezETH",
  },
  {
    iconUri: "/tokens/puffer-finance.webp",
    symbol: "pufETH",
  },
];

const TokenDropdownExample = () => {
  const [selectedToken, setSelectedToken] = useState(mockTokens[0]);

  return (
    <TokenDropdown
      tokens={mockTokens}
      selectedToken={selectedToken}
      onSelectToken={(token) => setSelectedToken(token)}
      ImageComponent={"img"}
    />
  );
};

export const Primary: Story = {
  render: () => <TokenDropdownExample />,
  args: {
    tokens: mockTokens,
    selectedToken: mockTokens[0],
  },
  parameters: {},
};

export const SingleToken: Story = {
  render: () => (
    <TokenDropdown
      tokens={[mockTokens[1]]}
      selectedToken={mockTokens[1]}
      ImageComponent={"img"}
    />
  ),
  args: {},
  parameters: {},
};