import React from "react";

import { StyleSheet, View, Text, Switch } from "react-native";

import { Card } from "@/components/ui/Cards";

import { Typography, Colors, Spacing } from "@/constants/theme";

const styles = StyleSheet.create({

  linkRowCard: {

    padding: Spacing.cardGap,

    flex: 1,

    flexDirection: "row",

    alignItems: "flex-start",

    justifyContent: "space-between",

    gap: 12,

  },

  linkRowIcon: {

    width: 40,

    height: 40,

  },

  linkRowDescription: {

    flexGrow: 1,

  },

  linkRowLabel: {

    ...Typography.bodyLg,

  },

  linkRowSublabel: {

    ...Typography.labelSm,

  },

});

type LinkRowProps = {

  icon: React.ReactNode;

  label: string;

  sublabel: string;

  disabled?: boolean;

  value?: boolean;

  onToggle: (value: boolean) => void;

};

export const LinkRow = ({

  icon,

  label,

  sublabel,

  disabled,

  value,

  onToggle,

}: LinkRowProps) => {

  return (

    <Card

      style={styles.linkRowCard}

      onPress={() => !disabled && onToggle(!value)}

    >

      {icon}

      <View style={styles.linkRowDescription}>

        <Text style={styles.linkRowLabel}>{label}</Text>

        <Text style={styles.linkRowSublabel}>{sublabel}</Text>

      </View>

      <Switch

        value={value}

        trackColor={{ false: "#767577", true: Colors.light.tint }}

        disabled={disabled}

        onValueChange={onToggle}

      />

    </Card>

  );

};