"use client";

import React from 'react';
import { Card, Button, Grid, Title, Text, Container, Box, Image } from '@mantine/core';
import NextImage from "next/image";
import logo from "@/app/image/logo.jpg";

import { IconBan, IconRefresh, IconExchange, IconCreditCard, IconBuildingBank, IconMobiledata, IconWallet, IconTransferIn } from '@tabler/icons-react';
import { IconLogout } from "@tabler/icons-react";
import { useRouter } from "next/navigation";




const options = [
    {
        title: 'Transfer within the bank',
        subtitle: '₹1 to ₹25 Lacs per day',
    },
    {
        title: 'IMPS P2A - Instant Transfer',
        subtitle: '365 days, 24x7',
    },
    {
        title: 'Transfer to other bank (NEFT)',
        subtitle: 'Also for Credit Cards',
    },
    {
        title: 'Transfer to other bank (RTGS)',
        subtitle: '₹2 Lacs to ₹25 Lacs per day',
    },
    {
        title: 'IMPS P2P - Instant Transfer',
        subtitle: '(IMPS: Mobile No.)',
    },

];


interface TransactionOptionProps {
    title: string;
    description: string;
    icon: React.ReactNode;
}

const TransactionOption: React.FC<TransactionOptionProps> = ({ title, description, icon }) => (
    <Card shadow="sm" padding="lg" radius="md" withBorder>
        <Grid align="center" justify="center" gutter="sm">
            <Grid.Col span={12} style={{ textAlign: 'center' }}>
                {icon}
            </Grid.Col>
            <Grid.Col span={12} style={{ textAlign: 'center' }}>
                <Title order={4}>{title}</Title>
                <Text size="sm" mt="xs">{description}</Text>
                <Button fullWidth mt="md" variant="light">Go</Button>
            </Grid.Col>
        </Grid>
    </Card>
);

const FundsTransferPage: React.FC = () => {

    const router = useRouter();
    
    async function handleLogout(e: React.FormEvent) {
        e.preventDefault();
        localStorage.removeItem("access_token");
        router.push("/login")
    }

    return (
        <div style={{ backgroundColor: "#c1e0f0", width: "100%", height: "100%", paddingTop: "5%" }}>
            <Box style={{
                position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
                display: "flex",
                justifyContent: "flex-start",
                background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)"
            }}>
                <Image
                    // radius="md"
                    fit="cover"
                    src={logo}
                    component={NextImage}
                    alt="ebanking"
                    style={{ width: "100%", height: "100%" }}
                />
                <Button style={{
                    position: 'absolute',
                    top: '50%',
                    left: '90%',
                    color: 'white',
                    textShadow: '1px 1px 2px black',
                    fontSize: "20px"
                }}
                    leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
            </Box>
            <div style={{ marginTop: '10px' }}>
                <Box mt="lg" p="xl">
                    {/* @ts-ignore */}
                    <Title order={2} align="center" mb="md">Select Transaction Type</Title>
                    <Grid gutter="lg">
                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
                            <TransactionOption
                                title="Transfer within the bank"
                                description="(Re. 1 to Rs. 25 Lacs per day)"
                                //icon={<IconBan size={40} stroke={1.5} />}
                                icon={<IconTransferIn size={40} stroke={1.5} />}
                            />
                        </Grid.Col>

                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
                            <TransactionOption
                                title="IMPS P2A - Instant Transfer"
                                description="(365 days, 24X7) (Re. 1 to Rs. 25 Lacs)"
                                icon={<IconExchange size={40} stroke={1.5} />}
                            />
                        </Grid.Col>

                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
                            <TransactionOption
                                title="Transfer to other bank (NEFT)"
                                description="(Also for Credit Cards Payment)"
                                icon={<IconCreditCard size={40} stroke={1.5} />}
                            />
                        </Grid.Col>

                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
                            <TransactionOption
                                title="Transfer to other bank (RTGS)"
                                description="(Rs. 2 Lacs to Rs. 25 Lacs per day)"
                                icon={<IconBuildingBank size={40} stroke={1.5} />}
                            />
                        </Grid.Col>

                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
                            <TransactionOption
                                title="IMPS P2P - Instant Transfer"
                                description="(365 days, 24X7) (IMPS: Mobile No.)"
                                icon={<IconMobiledata size={40} stroke={1.5} />}
                            />
                        </Grid.Col>


                    </Grid>
                </Box>

                <Box
                    component="footer"
                    style={{
                        width: "100%",
                        textAlign: "center",
                        padding: "10px 0",
                        bottom: 0,
                        left: 0,
                        zIndex: 1000,
                        fontSize: "14px",
                    }}
                >
                    <Text>
                        © 2025 KCC Bank. All rights reserved. {" "}

                    </Text>
                </Box>
            </div>

        </div>
    );
};

export default FundsTransferPage;