import type { CorePaymentTransactions } from "@/lib/features/bookings/types";
import { Flex, Grid, Text, TextInput } from "@mantine/core";
import { IconFileDescription } from "@tabler/icons-react";

const PaymentDetails: React.FC<{ payment: CorePaymentTransactions }> = ({
  payment,
}) => {
  return (
    <Flex direction={"column"} gap={28}>
      <Flex gap={4} align={"center"}>
        <IconFileDescription size={18} />
        <Text fz={14} fw={600}>
          Payment Details
        </Text>
      </Flex>
      <form>
        <Grid gutter={"lg"}>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Payment Gateway"
              radius={4}
              disabled
              value={payment.gateway}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Currency"
              radius={4}
              disabled
              value={payment.currency}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Payment Method"
              radius={4}
              disabled
              value={payment.method}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Reference ID"
              radius={4}
              disabled
              value={payment.ref_id}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Status"
              radius={4}
              disabled
              value={payment.status}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={12}
              labelProps={{ fz: 12, mb: 5 }}
              label="Created At"
              radius={4}
              disabled
              value={payment.created_at}
            />
          </Grid.Col>
        </Grid>
      </form>
    </Flex>
  );
};

export default PaymentDetails;