import React from 'react';
import { Button } from '@lendi-ui/button';
import { DollarField } from '@lendi/ui/DollarField';
import { Button as ButtonNext } from '@lendi/ui/Button';
import { Spacer } from '@lendi/ui/Layout';
import { Text } from '@lendi/ui/Typography';
import TextInput from '@lendi-ui/text-input';
import DollarIcon from '@lendi-ui/icon/Dollar';
import { Heading } from '@lendi-ui/typography';
import Logo from '@lendi-ui/logo';
import { useTheme } from './hooks';

export const Interactive = () => {
  return (
    <Spacer ygap="md" start="xs" end="xs" xalign="center">
      <Text tag="h1" variant="title1">
        What is your current loan amount?
      </Text>
      <Text tag="p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque incidunt doloribus fugit necessitatibus
        possimus? Harum, quibusdam ipsum, iusto in consequatur nihil molestias quos quas recusandae repudiandae quidem
        aspernatur beatae voluptatum.
      </Text>
      <DollarField label="Loan amount" />
      <ButtonNext variant="primary">Next</ButtonNext>
    </Spacer>
  );
};

export const ThemeExampleFunnel = () => {
  const theme = useTheme();

  return (
    <>
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          backgroundColor: '#fff',
          padding: '0 30px',
        }}
      >
        <Logo width="113px" />
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            gap: '20px',
            alignItems: 'center',
          }}
        >
          <Button variant="secondary" size="sm">
            Talk to an expert
          </Button>
          <Button variant="primary" size="sm">
            Book an appointment
          </Button>
        </div>
      </div>
      <div style={{ backgroundColor: theme.color.fill.selected }}>
        <div
          style={{
            width: '10%',
            height: '12px',
            backgroundColor: theme.color.fill.accent,
            borderWidth: '0',
            borderRadius: '0 6px 6px 0',
          }}
        ></div>
      </div>
      <div style={{ textAlign: 'center' }}>
        <Spacer ygap="md" start="80" end="xs" xalign="center">
          <Heading size="md">What is your current loan amount?</Heading>
          <TextInput
            isFullWidth
            before={
              <div style={{ marginLeft: '8px' }}>
                {' '}
                <DollarIcon color={theme.color.interaction.main} height="26px" />
              </div>
            }
          />
          <div style={{ width: 'calc(2 / 3 * 100%)', margin: '0 auto' }}>
            <Button variant="primary" isFullWidth>
              Next
            </Button>
          </div>
        </Spacer>
      </div>
    </>
  );
};
export const ThemeExampleFunnel2 = () => {
  const theme = useTheme();

  return (
    <>
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          backgroundColor: '#fff',
          padding: '0 30px',
        }}
      >
        <Logo width="113px" />
        <div
          style={{
            display: 'flex',
            flexDirection: 'row',
            gap: '20px',
            alignItems: 'center',
          }}
        >
          <Button variant="secondary" size="sm">
            Talk to an expert
          </Button>
          <Button variant="primary" size="sm">
            Book an appointment
          </Button>
        </div>
      </div>
      <div style={{ backgroundColor: theme.color.fill.selected }}>
        <div
          style={{
            width: '10%',
            height: '12px',
            backgroundColor: theme.color.fill.accent,
            borderWidth: '0',
            borderRadius: '0 6px 6px 0',
          }}
        ></div>
      </div>
      <div style={{ textAlign: 'center' }}>
        <Spacer ygap="md" start="80" end="xs" xalign="center">
          <Heading size="md">What best describes your home buying situation?</Heading>
          <div style={{ width: 'calc(2 / 3 * 100%)', margin: '0 auto' }}>
            <Spacer ygap="md" start="xs" end="xs" xalign="center">
              <Button variant="secondary" isFullWidth>
                Just exploring options
              </Button>
              <Button variant="secondary" isFullWidth>
                Plan to buy in the next 6 months
              </Button>
              <Button variant="secondary" isFullWidth>
                Actively looking / Made an offer
              </Button>
              <Button variant="secondary" isFullWidth>
                Exchanged contracts
              </Button>
            </Spacer>
          </div>
        </Spacer>
      </div>
    </>
  );
};